[HTML] 표(table) 안에서 THEAD, TBODY, TFOOT의 쓰임
그물터 관리/HTML, CSS
2009/04/04 23:14
<TABLE> 태그 안에서 <THEAD>는 표의 머리 부분, <TBODY>는 표의 본문 부분, <TFOOT>는 표의 꼬리 부분을 나타낸다. 다음은 이 태그들을 써서 만든 표 예제이다.
THEAD와 TFOOT는 표에서 한 번씩만 올 수 있고, TFOOT는 반드시 THEAD보나 뒤에 와야 한다. TBODY는 표에 여러 번 나올 수 있다.
THEAD에 들어가는 내용은 브라우저에 따라 쪽이 넘어가더라도 고정되어 나오기도 한다.
CSS로 THEAD, TBODY, TFOOT 태그에 다른 문단 또는 글자 속성을 지정할 수 있다.
<table width="100%" border="1">
<thead align="center">
<tr>
<td colspan="3">머리 부분</td>
</tr>
</thead>
<tbody align="center">
<tr>
<td>내용 1</td>
<td>내용 2</td>
<td>내용 3</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td colspan="3">꼬리 부분</td>
</tr>
</tfoot>
</table> | 머리 부분 | ||
| 내용 1 | 내용 2 | 내용 3 |
| 꼬리 부분 | ||
THEAD와 TFOOT는 표에서 한 번씩만 올 수 있고, TFOOT는 반드시 THEAD보나 뒤에 와야 한다. TBODY는 표에 여러 번 나올 수 있다.
THEAD에 들어가는 내용은 브라우저에 따라 쪽이 넘어가더라도 고정되어 나오기도 한다.
CSS로 THEAD, TBODY, TFOOT 태그에 다른 문단 또는 글자 속성을 지정할 수 있다.
![미리보기 그림 - [CSS] 파이어폭스에서 그림의 테두리가 잘리지 않게 하려면](/thumbnail/1/JP_Thumb/coverphoto/thumb_4094873711.png.webp)
덧글을 달아 주세요
흥반장 2012/07/24 19:08 고유주소 고치기 답하기
저도 이 방법 추천합니다! 복잡도가 높지 않은 웹페이지에서는 화면에 렌더링되는 것과 인쇄되는 것을 한꺼번에 고려하여야 하는데 그때 빛을 발하는 것 같아요. 특히나 Thead ㅎㅎㅎ
팥알 2012/07/24 22:05 고유주소 고치기 답하기
그렇죠. 웹 누비개(브라우저)가 잘만 지원해 주면 thead는 긴 표가 들어갔을 때나 깔끔한 표를 만들 때에 쓸모 있죠.
이형근 2021/10/14 19:47 고유주소 고치기 답하기
감사합니다 잘 보고가요 !!!!!!!!!!!