HTML에서 표(table)에 바닥글(footer)을 추가하려면 <tfoot> 태그를 사용합니다. 이 태그는 <thead>(표 머리글)와 <tbody>(표 본문) 태그와 함께 사용되어 표의 각 영역, 즉 머리글·본문·바닥글을 구조적으로 구분하는 역할을 합니다.
tfoot 태그의 주요 속성
<tfoot> 태그에서 사용할 수 있는 속성은 다음과 같습니다. 아래 나열된 속성들은 모두 HTML5에서 더 이상 권장되지 않는(deprecated) 속성이므로, 실제 프로젝트에서는 CSS로 대체하는 것이 좋습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| align | right left center justify char |
지원 중단됨 – 셀 내용의 시각적 수평 정렬을 지정합니다. |
| char | character | 지원 중단됨 – 텍스트를 정렬할 기준 문자를 지정합니다. align="char"일 때 사용됩니다. |
| charoff | 픽셀 또는 % | 지원 중단됨 – char 속성으로 지정한 첫 번째 문자를 기준으로 정렬 오프셋(픽셀 또는 백분율)을 지정합니다. |
| valign | top middle bottom baseline |
지원 중단됨 – 셀 내용의 수직 정렬을 지정합니다. |
tfoot 사용 예제
아래 코드를 실행하면 HTML에서 표의 바닥글이 어떻게 표시되는지 직접 확인할 수 있습니다. <tfoot>가 <tbody>보다 앞에 위치해도 브라우저는 바닥글을 표 하단에 렌더링한다는 점이 특징입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style = "width:100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the footer of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
</table>
</body>
</html>
정리
<tfoot> 태그는 표의 요약 정보나 합계 행 등을 하단에 표시할 때 유용합니다. 예전에는 align, valign 같은 정렬 속성을 함께 사용했지만, 현재는 CSS의 text-align, vertical-align 속성으로 스타일을 제어하는 것이 표준적인 방법입니다. 또한 <tfoot>를 사용하면 스크린 리더 사용자에게도 표 구조를 명확하게 전달할 수 있어 접근성 측면에서도 도움이 됩니다.