tfoot element - by. UXKM

요약 설명

<tfoot> 요소는 <table> 요소 내에서 표의 바닥글(요약 또는 합계 등)을 나타내는 시맨틱 태그로, 주로 표 본문의 계산 결과나 요약 정보를 하단에 제공할 때 사용됩니다.
내부에는 하나 이상의 <tr>(행)을 포함하며, <td> 또는 <th> 요소를 통해 내용을 구성합니다.
HTML 구조상 <thead>, <tfoot>, <tbody> 순으로 작성하는 것이 일반적이지만, <thead>, <tbody>, <tfoot> 순서로 작성해도 표준에 어긋나는 것은 아닙니다.
즉, 작성 순서와 관계없이 실제 화면에서는 바닥글로 표시되며, 요약이나 총합 등의 정보를 하단에 고정된 구조로 제공할 수 있습니다.
데이터의 요약이나 고정 바닥글을 제공할 때 유용하며, 접근성과 테이블 구조 이해도를 높이는 데 도움을 줍니다.

주요 역할 및 특징

  1. 테이블의 바닥글(푸터) 정의
    • 총합, 요약, 메모, 출처 등의 정보를 담아, 테이블의 마무리 역할을 합니다.
    • 예: “총 합계”, “출처: 내부 자료” 등.
  2. <thead>, <tbody>와 함께 사용 가능

    <thead>, <tbody>와 함께 사용하여 테이블을 논리적으로 구조화할 수 있습니다.

  3. 접근성 향상

    스크린 리더가 머리글, 본문, 바닥글을 구별해 읽어주기 때문에 시각 장애인에게 유용합니다.

  4. 반복되는 테이블에서 유용

    페이지가 넘어가는 테이블을 출력할 때 <tfoot>에 포함된 내용이 각 페이지마다 반복 표시될 수 있습니다.

  5. CSS를 통한 고정 바닥글 구현 가능

    position: sticky;를 사용해 스크롤 시에도 하단에 고정할 수 있습니다.

  6. 반드시 <table> 내에서 사용

    <tfoot> 요소는 반드시 <table> 내부에서 사용해야 하며, 단독으로 사용할 수 없습니다.

CSS 기본 값

<tfoot> 요소는 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<tfoot> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

<thead>, <tbody>, <tfoot>을 함께 사용

고정 바닥글 (position: sticky 사용)

주의사항

  • 표준 상에서는 <thead> 다음, <tbody> 이전에 두는 것이 권장되지만, 위치에 상관없이 작동하며 브라우저는 자동으로 테이블의 하단에 표시합니다.
  • <tfoot>은 선택적 요소이며, 테이블이 작동하는 데 필수 요소는 아닙니다.
  • <tfoot> 내에는 반드시 <tr>와 함께 <td> 또는 <th>를 사용해야 합니다.