HTML <tfoot> 태그 – 올바른 이해와 사용 방법

`<tfoot>` 태그의 정의 및 사용법

<tfoot> 태그는
테이블 푸터(table foot, 바닥글)에 해당하는 행(<tr> 태그)들의 그룹을 나타냅니다.

이 태그는 부모 테이블의 요약 정보나 계산 결과 등을 포함하는 행들로 구성된 테이블 푸터로 정의할 때 사용됩니다.

`<tfoot>` 태그의 유용성

<tfoot> 태그를 <thead>(테이블 헤더)와 <tbody>(테이블 본문) 태그과 함께 사용하면,
HTML의 의미론적 측면에서 테이블의 헤더(머리글), 본문, 푸터(바닥글)를 구분하여 더 나은 테이블 구조를 파악하고, 접근성 도구(예: 스크린 리더)나 검색 엔진 등 다양한 보조 기술에서 정보로 활용하는데 도움이 됩니다.

주요 마크업 규칙

<tfoot> 태그의 부모는 <table> 태그이어야 합니다.
<tfoot> 태그의 자식은 0개 이상의 <tr> 태그이어야 합니다.
테이블당 <tfoot> 태그는 없거나 하나만 있을 수 있습니다. (테이블의 구조적 명확성을 위해)

전체적인 마크업 규칙은 기술적인 문법 요약을 참고하세요.

데모

HTML

<table>
    <caption>영수증</caption> <!-- 테이블 제목 -->
    <thead> <!-- 테이블 헤더(머리글) -->
        <tr>
            <th scope="col">상품</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody> <!-- 테이블 본문(주요 데이터) -->
        <tr>
            <td>커피</td>
            <td>2,500</td>
        </tr>
        <tr>
            <td>과자</td>
            <td>1,500</td>
        </tr>
    </tbody>
    <tfoot> <!-- 테이블 푸터(바닥글) -->
        <tr>
            <th scope="row">합계</th>
            <td>4,000</td>
        </tr>
    </tfoot>
</table>

실제 적용된 모습 CSS를 사용해서 테이블의 구성 요소의 주변에 선과 배경색을 만들어 구조를 더 명확하게 파악할 수 있도록 스타일을 추가했습니다.

영수증
상품	가격
커피	2,500
과자	1,500
합계	4,000

CSS

th, td {
    padding: 0.5em 1em;
    border: 1px solid gray;
}
thead, tfoot {
    background-color: black;
    color: white;
}
tbody {
    background-color: gold;
}

속성

<tfoot> 태그는 모든 전역 속성만을 사용할 수 있습니다.

더 이상 사용되지 않는 속성

예전에는 이 태그만을 위한 다음의 속성들이 있었지만
이제는 명세서에서 삭제된 비표준으로 더 이상 사용되지 않으며 사용해서는 안 됩니다.
아직 많은 학습서나 기존 코드에서 사용하고 있으므로 관심사를 위해서만 아래에 나열합니다.

이 속성들을 각 브라우저별로 아직까지 지원할 수 있지만 모든 사용자에게 적합하지 않을 수도 있습니다.
구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다.

align
bgcolor
char
charoff
valign

기술적인 문법 요약

tfoot 태그의 구문 형식
허용되는 부모 요소	`<table>`의 자식으로서, `<caption>`, `<colgroup>`, `<thead>`, `<tbody>`, `<tr>` 뒤에 위치해야 하지만, `<table>`의 자식인 다른 `<tfoot>`이 없는 경우에만 가능(여러 개의 `<tfoot>`을 배치할 수 없다는 의미)합니다.
허용되는 콘텐츠	없거나, `<tr>` 또는 (스크립트를 지원하는 `<script>` 및 `<template>`도 허용됩니다.)
암시적인 `role` 속성 값	`rowgroup`
허용된 `role` 속성 값	모두(Any)

일반적인 실수

<tfoot> 태그의를 사용할 때 저지르기 쉬운 일반적인 실수에 대해 알아보겠습니다.

`<tbody>` 뒤에 `<tfoot>` 태그가 없습니다.

HTML

<table>
    <caption>영수증</caption>
    <thead>
        <tr>
            <th scope="col">상품</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>커피</td>
            <td>2,500</td>
        </tr>
        <tr>
            <td>과자</td>
            <td>1,500</td>
        </tr>
    </tbody>
    <!-- <tbody> 뒤에 <tfoot> 태그가 없습니다 -->
    <tr>
        <th scope="row">합계</th>
        <td>4,000</td>
    </tr>
</table>

위 예제처럼 <tbody> 뒤에 <tfoot> 태그가 없으면 별 문제가 없을 것이라고 생각할 수도 있지만, 그렇지가 않습니다.

테이블 내에서 <table>의 직계 자식으로 <tr>이 배치되어 있으면, , 브라우저가 자동으로 배치되어 있는 <tr>의 부모로서 <tbody> 태그를 마크업에 추가합니다. (브라우저가 자동으로 마크업을 추가하는 것을 '암시적으로 추가'한다라고 말합니다.)

HTML 브라우저가 암시적으로 <tbody> 태그를 추가합니다.

<table>
    <caption>영수증</caption>
    <thead>
        <tr>
            <th scope="col">상품</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>커피</td>
            <td>2,500</td>
        </tr>
        <tr>
            <td>과자</td>
            <td>1,500</td>
        </tr>
    </tbody>
    <tbody> <!-- 브라우저가 추가한 <tbody> 태그 -->
        <tr>
            <th scope="row">합계</th>
            <td>4,000</td>
        </tr>
    <tbody>
</table>

이렇게 암시적으로 <tbody> 태그를 추가하기 때문에 테이블의 구조적 맥락에서 테이블의 푸터가 아닌 본문으로 해석되는 오류가 발생하게 됩니다.