HTML <tfoot> тег

  • Предыдущая страница <textarea>
  • Следующая страница <th>

Определение и использование

<tfoot> тег используется для группировки содержимого подзаголовка в HTML-таблице.

<tfoot> элементы используются с <thead> и <tbody> элементы используются вместе, чтобы определить каждую часть таблицы (подзаголовок, заголовок, текст).

браузеры могут использовать эти элементы, чтобы при прокрутке содержимого таблицы заголовки и подзаголовки могли отображаться независимо. Кроме того, при печати больших таблиц,Spanning на несколько страниц, эти элементы позволяют напечатать заголовки и подзаголовки в верхней и нижней части каждой страницы.

Внимание: Элемент <tfoot> должен содержать один или несколько <tr> тега.

<tfoot> теги должны использоваться в следующих контекстах: в качестве <table> подэлементы, в любом <caption>и<colgroup>и<thead> и <tbody> элементы после

Совет:По умолчанию, <thead>, <tbody> и <tfoot> Элементы не влияют на макет таблицы. Однако, вы можете использовать CSS для установки стиля этих элементов (см.下面的 примеры)!

Пример

Пример 1

HTML-таблица, содержащая элементы <thead>, <tbody> и <tfoot>:

<table>
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Сбережения</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Январь</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Февраль</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>Февраль</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Общий合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Попробуйте сами

Пример 3

Как выровнять <tfoot> содержание (использование CSS):

<table style="width:100%">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Общий合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Попробуйте сами

Пример 4

Как выровнять вертикально <tfoot> содержание (использование CSS):

<table style="width:100%">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</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;
}

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <textarea>
  • Следующая страница <th>