..

Search

<tfoot>

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>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<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);

};


연관 페이지

HTML 테이블 수업 ⇒

CSS 테이블 수업 ⇒


연습문제