[HTML #8] 표 table, tbody, tr, td, thead, caption

HTML
에서 간단하게 <table> 태그를 통해 표를 만드는 방법에 대해 알아보겠습니다.

Table

<table> 태그는 이름 그대로 표를 생성해주는 HTML 태그입니다. 

 

<table>의 태그는 아래와 같습니다.

태그 속성	설명
<table>	테이블을 생성하는 태그
<th>	각 열의 제목을 정의
<tr>	테이블의 행 (세로)
<td>	테이블의 열 (가로) / 하나의 테이블 셀을 정의
<tbody>	테이블을 하나의 그룹으로 묶을 때 사용
<thead>	테이블의 헤더 부분을 그룹화
<caption>	테이블 캡션을 붙일때  <table> 태그 바로 뒤에 사용

태그 속성 사용

그럼 위 <table> 태그를 을 사용해보도록 하겠습니다.

 

시작은 <table></table>로 시작하고 행과 열을 <tr>와 <td> 태그로 정해 주면 됩니다.

 

바로 위에 사용된 표를 그대로 HTML로 작성해보려고 합니다. 가로가 7줄, 세로가 2줄로 정해주고,  <tr></tr> 태그를 총 7개, 그리고 <tr> 태그 안에 <td> 태그를 총 2개씩 넣어주면 됩니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

<tbody>

<tbody> 태그는 <table> 태그에서 내용 콘텐츠들을 하나의 그룹으로 묶을 때 사용합니다.

 

<tbody> 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 <thead>, <tfoot> 요소와 함께 사용 되는데, 이 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있으며, 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 각 페이지의 상단과 하단에 테이블의 헤더와 푸터가 모두 인쇄되도록 할 수도 있습니다.

 

<tbody> 태그는 <table> 태그의 자식 태그로써, 반드시 모든 <caption>, <colgroup>, <thead> 요소 다음에 위치해야 합니다. 또한, <tbody> 요소는 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 합니다.

 

<thead>와 <tbody>, <tfoot> 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수 있습니다.

<caption>

<caption> 태그는 테이블의 캡션(설명)을 정의할 때 사용합니다.

 

<table> 요소는 단 하나의 <caption> 요소만을 명시할 수 있으며, <caption> 요소는 언제나 <table> 요소 바로 다음에 위치해야 합니다.

 

<caption> 요소의 콘텐츠는 테이블 바로 위쪽에 가운데 정렬되어 표시되지만, CSS의 text-align이나 caption-side 속성을 사용하여 캡션의 위치나 정렬 방법 등을 변경할 수 있습니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

width / height 지정

<table> 태그 각각의 셀마다 특정한 width과 height를 지정해줄 수 있습니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

최 상단의 <td> 속성의 width을 퍼센트로 비율에 맞춰 넣어주게 되면 위와 같은 결과를 얻을 수 있습니다.

테이블 병합

테이블을 병합 하는 방법도 있습니다. <td rowspan="n">  속성을 사용하면 되는데, 우선 기본적인 표를 하나 만들어보겠습니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

위 표를 보면 희진과 미진의 지역이 같습니다. 이것을 병합하려고 하는데, 희진 부분의 3번째 <tr>과 미진의 4번째 <tr>의 <td> 두번째 요소를 봐주시면 됩니다.

 

3번째 <tr>의 두번째 <td>요소를 <td rowspan="2">로 수정하고 4번째 <tr>의 두번째 <td>요소를 완전히 삭제해주면 됩니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

---

이렇게 오늘은 <table> 태그를 통해 표를 만드는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟