[HTML] TABLE 태그중 THEAD, TFOOT, TBODY 태그에 대해 알아보기

THEAD, TFOOT, TBODY 태그란?

TABLE 태그중에 THEAD, TFOOT, TBODY라는 태그들이 존재한다.
이전에는 스타일 적용이나 알아보기 좋게만 하는 용도인줄 알았는데 테이블에 대해
공부하다 보니 많은 기능들이 있는것을 알게되었다.

<thead>
태그는 표의 머리글 역활을 하며, <th>태그( 셀의 내용이 중앙에 출력되면서 두껍게 출력 )를 이용한다.
Table 요소의 자손으로 caption, colgroup 요소의 뒤 tbody, tfoot, tr 요소의 앞에 선언
열 제목(헤더)으로 구성된 행의 집합을 나타내며 Table 요소 하나에 한번만 쓸 수 있다.

<tfoot>태그는 표의 바닥글 역활을 한다.
<tbody>태그는 본문이 들어가는 행의 묶음이다.
THEAD, TFOOT, TBODY 태그들은 기술순서를 지켜야한다.

코딩순서: THEAD -> TFOOT -> TBODY

여기에서 이상한점은 TFOOT이 먼저 온다는 점인데 DTD 선언문에 위와같은 순서로 정의가 되어있고,
위와 같은 순서로 코딩하더라도 화면 출력시에는 THEAD - TBODY - TFOOT 형식으로 출력이 된다.

또한, 중요한 부분이 있다.
표 출력시 페이지가 넘어가게 되면 THEAD부분과 TFOOT 부분이 반복 인쇄가 된다.
이런 이유로 THEAD부분과 TFOOT부분을 먼저 읽어들이고, 본문부분을 마지막에 읽어들이는듯 하다.

그리고 한가지.
THEAD, TFOOT은 하나의 테이블 하나만 존재해야 하지만,
TBODY는 여러개 존재 가능하다는 점이다.

<예제> THEAD, TFOOT, TBODY 사용예

[출력]

책목록

제목	가격
저작권: bookstore
헤리포터	29,000
반지의제왕	30,000

[소스]
<table border="1" cellspacing="0">
<caption>책목록</caption>
<thead>
<tr>
<th>제목</th>
<th>가격</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">저작권: 해리포터</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>헤리포터</td>
<td>29,000</td>
</tr>
<tr>
<td>반지의제왕</td>
<td>30,000</td>
</tr>
</tbody>
</table>

예전에는 표를 통해 데이터 출력시 헤더 출력하고 PHP로 데이터부분 출력하고,
푸터부분에 페이지 번호나 버튼등을 출력하는 경우가 많았는데 이 태그들을 잘 활용하면
좀더 보기좋고 정리된 코딩이 가능할듯 하네요.

출처 : http://blog.naver.com/ckhdyw1