HTML тег <tfoot>

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

Подвал — естественное место для итогов по столбцам, сумм, средних значений и других итоговых строк, агрегирующих данные тела таблицы. Группировка этих строк с помощью <tfoot> вместо обычного <tr> придаёт таблице чёткую семантическую структуру, что помогает вспомогательным технологиям описывать таблицу пользователям программ чтения с экрана.

Зачем использовать `<tfoot>` ?

Семантика и итоги. Подвал сигнализирует: «эти строки подводят итог таблицы» — суммы, промежуточные итоги, счётчики или примечания. Нередко один <th> или <td> охватывает всю ширину с помощью colspan.
Поведение при печати и прокрутке. При печати длинной таблицы на нескольких страницах некоторые браузеры повторяют <thead> и <tfoot> на каждой странице. Если тело прокручивается независимо (с помощью CSS-свойства overflow), подвал может оставаться зафиксированным внизу.
Доступность. Явные группы заголовка, тела и подвала дают программам чтения с экрана более осмысленную структуру по сравнению с плоским списком строк.

Где размещать `<tfoot>` ?

Тег <tfoot> должен быть объявлен внутри элемента <table>, после элементов <caption> и <colgroup> (при их наличии).

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

Опасно

Тег <tfoot> должен содержать хотя бы один тег <tr>.

Совет

Элементы <thead> , <tbody> и <tfoot> по умолчанию не влияют на макет таблицы. Используйте свойства CSS для настройки внешнего вида таблицы.

Синтаксис

Тег <tfoot> используется парно. Содержимое записывается между открывающим ( <tfoot> ) и закрывающим ( </tfoot> ) тегами.

HTML-тег <tfoot>

<table>
  <thead> ... </thead>
  <tbody> ... </tbody>
  <tfoot>
    <tr>
      <td> ... </td>
    </tr>
  </tfoot>
</table>

Пример со строкой итогов

В этом примере совместно используются <thead> , <tbody> и <tfoot> . Подвал содержит итоговую строку, суммирующую значения тела:

<!DOCTYPE html>
<html>
  <head>
    <title>tfoot totals row</title>
    <style>
      table { width: 360px; border-collapse: collapse; }
      th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
      tfoot td { font-weight: bold; background-color: #f2f2f2; }
    </style>
  </head>
  <body>
    <table>
      <caption>Monthly Sales</caption>
      <thead>
        <tr>
          <th>Product</th>
          <th>Units</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Keyboards</td>
          <td>40</td>
        </tr>
        <tr>
          <td>Mice</td>
          <td>35</td>
        </tr>
        <tr>
          <td>Monitors</td>
          <td>25</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>100</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Result

Обратите внимание, что <tfoot> записан после <tbody> в исходном коде, однако подвал всё равно отображается внизу — именно там, где вы его и читаете.

Структурирование сложных таблиц

Используйте элементы <thead> , <tbody> и <tfoot> для организации таблиц с большими или сложными наборами данных. Они делают исходный код более читаемым, позволяют стилизовать каждый раздел независимо и улучшают доступность. Чтобы включить независимую прокрутку тела при сохранении видимости заголовка и подвала, примените CSS-свойства overflow к <tbody> .

Атрибуты

Атрибут	Значение	Описание
align	right, left, center, justify, char	Задаёт горизонтальное выравнивание содержимого внутри элемента `<tfoot>` . Этот атрибут не поддерживается в HTML5.
bgcolor	bgcolor	Задаёт цвет фона строк внутри элемента `<tfoot>` . Этот атрибут не поддерживается в HTML5.
char	character	Задаёт выравнивание содержимого внутри элемента `<tfoot>` по символу. Используется только при значении атрибута align="char". Этот атрибут не поддерживается в HTML5.
charoff	number	Задаёт количество символов, на которое смещается содержимое внутри элемента `<tfoot>` относительно символа, указанного в атрибуте char. Используется только при значении атрибута align="char". Этот атрибут не поддерживается в HTML5.
valign	top, bottom, middle, baseline	Задаёт вертикальное выравнивание содержимого внутри элемента `<tfoot>` . Этот атрибут не поддерживается в HTML5.

Примечание: все перечисленные выше атрибуты устарели в HTML5. Используйте CSS вместо них. В таблице ниже показана современная замена каждого из них:

Устаревший атрибут	Замена в CSS
`align`	`text-align`
`valign`	`vertical-align`
`bgcolor`	`background-color`

Тег <tfoot> также поддерживает глобальные атрибуты и атрибуты событий.

Как стилизовать HTML-тег <tfoot>

tfoot {
  background-color: #f2f2f2; /* replaces bgcolor */
  font-weight: bold;
  text-align: right;         /* replaces align */
  vertical-align: middle;    /* replaces valign */
}

Смотрите главу CSS Tables для ознакомления с другими способами стилизации разделов таблицы.

Практика

Каково назначение HTML-тега tfoot и где он может располагаться в таблице?

Он группирует содержимое подвала (например, итоги или итоговые строки) и в HTML5 может располагаться до или после тега tbody, при этом всегда отображаясь внизуОн группирует содержимое заголовка таблицыОн группирует основные строки данных таблицыОн группирует содержимое подвала, но должен размещаться перед тегом theadОн группирует содержимое подвала и в HTML5 должен располагаться перед tbody, иначе страница считается недействительной

Зачем использовать <tfoot> ?

Где размещать <tfoot> ?