HTML <tfoot> 태그
정의 및 특징
<tfoot> 태그는 HTML 테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용합니다.
<tfoot> 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 <thead>, <tbody> 요소와 함께 사용됩니다.
브라우저는 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있으며, 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 각 페이지의 상단과 하단에 테이블의 헤더와 푸터가 모두 인쇄되도록 할 수도 있습니다.
<tfoot> 요소는 <table> 요소의 자식 요소로써, 반드시 모든 <caption>, <colgroup>, <thead>, <tbody> 요소 다음에 위치해야 합니다. 또한, <tfoot> 요소는 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 합니다.
<thead>와 <tbody>, <tfoot> 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수는 있습니다.
예제
<table>
<thead>
<tr>
<th>출장비 내역</th>
<th>금액</th>
</tr>
</thead>
<tbody>
<tr>
<td>교통비</td>
<td>45000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>총 합계</td>
<td>103000</td>
</tr>
</tfoot>
</table>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <tfoot> | 1.0 | 지원함 | 지원함 | 1.0 | 지원함 | 지원함 |
HTML5에서 변경된 사항
HTML5에서는 <tfoot> 태그의 align, char, charoff, valign 속성을 더 이상 지원하지 않습니다.
사용할 수 있는 속성
| 속성명 | 속성값 | 설명 | |
|---|---|---|---|
|
align |
left center right justify char |
<tfoot> 요소 내 콘텐츠에 대한 정렬 방법을 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
| char | 문자 |
<tfoot> 요소 내 콘텐츠를 정렬할 때 기준이 되는 문자를 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
|
charoff |
숫자 |
<tfoot> 요소 내 콘텐츠에서 char 속성에 명시된 문자를 기준으로 정렬될 문자수를 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
|
valign |
top middle bottom baseline |
<tfoot> 요소 내 콘텐츠에 대한 수직 방향의 정렬 방법을 명시함. HTML5에서는 더 이상 지원하지 않음. |
CSS 기본값
|
tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; } |
DOM 인터페이스
|
interface HTMLTableSectionElement : HTMLElement { [SameObject] readonly attribute HTMLCollection rows; HTMLElement insertRow(optional long index = -1); void deleteRow(long index); }; |
