[HTML] Table 표에 시맨틱 태그 사용해서 구조화하기 (caption, thead, tbody)

 지난 시간에 Table 태그로 표를 만들고 행열을 병합하는 과정을 배웠습니다. 이번에는 시맨틱 태그를 사용해서 표를 구조화하는 방법을 알아보겠습니다.

 

2022.04.27 - [Web] - [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석

 시맨틱 태그가 무엇이고, 왜 사용해야 하는지는 위 글에서 참조하실 수 있습니다.

 

[ Contents ]

 

 

1. 표 제목 태그 <caption>

  <table border="1">
      <caption>표 제목</caption>
      <tr><th>제목1</th><th>제목2</th></tr>
      <tr><td>내용1</td><td>내용2</td>
      <tr><td colspan="2">내용</td></tr>
  </table>

 caption 태그는 표의 제목을 달아줍니다. 

 

 

<caption style="caption-side: bottom;">표 제목</caption>

 만약 표 제목을 아래에 달아주고 싶다면, css를 사용해서 bottom으로 변경합니다.

 

 

 

2. 제목 행 태그 <thead>

  <table border="1">
      <caption>표 제목</caption>
      <thead>
        <tr><th>제목1</th><th>제목2</th></tr>
      </thead>
      <tr><td>내용1</td><td>내용2</td>
      <tr><td colspan="2">내용</td></tr>
  </table>

 thead 태그는 주로 1행의 th태그를 감싸줍니다. 표의 제목행을 나타내는 시맨틱 태그로, 별다른 기능은 없습니다.

 

 

 

3. 표 본문 태그 <tbody>

  <table border="1">
      <caption>표 제목</caption>
      <thead>
        <tr><th>제목1</th><th>제목2</th></tr>
      </thead>
      <tbody>
        <tr><td>내용1</td><td>내용2</td>
      </tbody>
      <tr><td colspan="2">내용</td></tr>
  </table>

 tbody는 표의 본문을 나타내는 시맨틱 태그입니다. thead와 tfoot를 제외한 모든 셀이 tbody에 해당합니다.

 

 

 

4. 바닥 행 태그 <tfoot>

  <table border="1">
      <caption>표 제목</caption>
      <thead>
        <tr><th>제목1</th><th>제목2</th></tr>
      </thead>
      <tbody>
        <tr><td>내용1</td><td>내용2</td>
      </tbody>
      <tfoot>
        <tr><td colspan="2">바닥셀</td></tr>
      </tfoot>
  </table>

 tfoot는 표의 맨 아랫행을 나타내는 시맨틱 태그입니다. 맨 아랫행이 tbody 셀들의 합계나 결과, 요약 등일 때, tbody와 다른 내용임을 나타내기 위해 사용합니다.

 일반적인 표에서는 주로 thead와 tbody만 사용하며, tfoot는 많이 생략합니다.