tfoot 태그

tfoot 태그는 표의 하단 부분을 정의합니다. 특정 그룹에 CSS 스타일을 즉시 적용할 수 있도록 행을 그룹화하는 데 사용됩니다. 한 개의 표에는 tfoot 태그를 하나만 사용할 수 있습니다.

tfoot 태그는 종종 thead 와 tbody 태그와 함께 사용되어 HTML 표의 상단, 본문, 하단 부분을 정의합니다. 기본적으로 브라우저는 tfoot의 내용을 표 하단에, thead의 내용을 표 상단에 배치합니다.

예시

tfoot 태그로 그룹화된 행에 color 속성을 사용하여 텍스트 색상을 빨간색으로 지정해 보겠습니다:

html<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>성</th>
      <th>급여</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>이름1</td>
      <td>성1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>이름2</td>
      <td>성2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>개수: 2</td>
      <td>-</td>
      <td>합계: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

예시

여기서는 thead가 상단에, tfoot가 하단에 위치하지 않았지만, 브라우저가 각각의 위치에 자동으로 배치하는 것을 확인할 수 있습니다:

html<table>
  <tfoot>
    <tr>
      <td>개수: 2</td>
      <td>-</td>
      <td>합계: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>이름1</td>
      <td>성1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>이름2</td>
      <td>성2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>이름</th>
      <th>성</th>
      <th>급여</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

관련 항목