HTML <tfoot> 태그

정의 및 사용법

<tfoot> 요소는 HTML 테이블의 푸터 내용을 그룹화하는 데 사용됩니다.

<tfoot> 요소와 <thead> 와 <tbody> 요소를 결합하여 테이블의 각 부분(푸터, 헤더, 본문)을 지정할 수 있습니다.

브라우저는 이러한 요소를 사용하여 테이블 본문을 스크롤할 때, 헤더와 푸터가 독립적으로 표시될 수 있도록 합니다. 또한, 여러 페이지에 걸쳐 인쇄되는 대형 테이블에서 이러한 요소는 테이블의 헤더와 푸터가 각 페이지의 상단과 하단에 인쇄될 수 있도록 합니다.

주의: <tfoot> 요소는 하나 이상의 <tr> 요소.

<tfoot> 요소는 다음 상황에서만 사용해야 합니다: <table> 요소의 자식 요소는 어떤 상황에서든 <caption>및<colgroup>및<thead> 와 <tbody> 요소 뒤에.

훌륭한 팁:기본적으로, <thead>, <tbody>, 및 <tfoot> 요소는 테이블 레이아웃에 영향을 미치지 않습니다. 그러나 이러한 요소의 스타일을 설정할 수 있습니다(아래 예제 참조)!

예제

예제 1

<thead>, <tbody>, 및 <tfoot> 요소를 포함한 HTML 테이블:

<table>
  <thead>
    <tr>
      <th>월</th>
      <th>저축</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>일월</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>2월</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>총액</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

직접 시험해 보세요

예제 2

CSS를 사용하여 <thead>, <tbody>, 및 <tfoot>의 스타일을 설정합니다:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>월</th>
      <th>저축</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>일월</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>2월</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>총액</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

직접 시험해 보세요

예제 3

정렬하는 방법 <tfoot> 의 내용(HTML을 사용하여):

<table style="width:100%">
  <tr>
    <th>월</th>
    <th>저축</th>
  </tr>
  <tr>
    <td>일월</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2월</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>총액</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

직접 시험해 보세요

예제 4

가로 정렬하는 방법 <tfoot> 의 내용(HTML을 사용하여):

<table style="width:100%">
  <tr>
    <th>월</th>
    <th>저축</th>
  </tr>
  <tr>
    <td>일월</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2월</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>총액</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

직접 시험해 보세요

전역 속성

<tfoot> 태그는 또한 이벤트 속성을 지원합니다 HTML에서의 전역 속성。

이벤트 속성

<tfoot> 태그는 또한 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성。

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시됩니다 <tfoot> 요소:

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원