예를 들어, 03/07/table.html의 코드를 thead, tfoot, tbody 태그로 그룹 지으면 다음과 같습니다.
03/07/table-group.html
<table>
<thead>
<tr>
<th>번호</th>
(중략)
</tr>
</thead>
<tfoot>
<tr>
<td>총 금액</td>
(중략)
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>콜라</td>
(중략)
</tr>
(중략)
</tbody>
</table>
Note thead, tfoot, tbody 태그는 왜 사용하나요?
thead, tbody, tfoot 태그를 사용하는 가장 큰 이유는 웹 접근성을 향상하는 데 있습니다. 한 가지 예로, 시각 장애인은 스크린 리더기(HTML을 음성으로 읽어 주는 보조 도구)를 사용해 웹 페이지를 탐색합니다. 이때 많은 정보를 나열한 표 데이터가 있다고 생각해 봅시다. 그러면 일반적으로 스크린 리더기는 모든 표 데이터를 읽어 내용을 전달합니다. 그런데 thead 태그와 tfoot 태그가 사용된 표라면 tbody 태그의 데이터를 읽기 전에 thead 태그의 헤더 정보와 tfoot 태그의 푸터 정보를 먼저 전달해서 지금 접근하는 표가 어떤 데이터를 담고 있는지 표 내용을 모두 읽기 전에 먼저 파악할 수 있습니다. 이 밖에도 표를 인쇄할 때, 표 데이터가 여러 장에 걸쳐 있더라도 thead, tfoot 태그는 각각의 페이지에 인쇄되어 여러 장에 걸쳐 있는 표가 어떤 표인지 쉽게 파악할 수 있습니다