본문 바로가기

웹표준화/실용예제로 배우는 웹표준

테이블_<thead><tfoot><tbody>

테이블의 행은 테이블 헤더, 테이블 푸터, 테이블 본문으로 구성되며 이때 각각 thead, tfoot, tbody 태그를 사용한다.
이런 구문을 통해 웹 브라우져는 테이블 헤드와 풋과는 관계없이 테이블 본문만을 스크롤 하는 기능을 지원할 수 있다. 내용이 긴 테이블을 인쇄할 경우 각 페이지마다 헤더와 푸터 정보가 반복 인쇄된다.

tbody 섹션만 독립적으로 스크롤링할 수 있는 기능을 제공하는 프로그램에서 활용할 수 있다. 테이블의 내용이 길 경우에 유용하다.

thead, tfoot은 tbody보다 반드시 먼저나와 웹 브라우져나 기기들이 이 내용을 먼저 읽을 수 있게 해야한다.
-------------------------------------------
<table>
 <thead>
  <tr>
  ---테이블 헤더 내용---
  </tr>
 </thead>
 <tfoot>
  <tr>
  ---테이블 푸터 내용---
  </tr>
 </tfoot>
 <tbody>
  <tr>
  ---테이블 데이터행---
  </tr>
  <tr>
  ---테이블 데이터행---
  </tr>
  <tr>
  ---테이블 데이터행---
  </tr>
 </tbody>
</table>
-------------------------------------------

thead, tfoot, tbody는 테이블에 부가적인 의미를 부여할 뿐 아니라 <tr>태그에 별도의 클래스를 지정하지않고 css로 스타일을 더 세밀하게 지정할 수 있다.