<tfoot>

Что делает тег

Тег <tfoot> создаёт нижнюю часть таблицы — с подведением результатов или другой информацией. Он используется вместе с тегами <table> и <tbody> для структурирования содержимого HTML-таблицы.

Синтаксис тега <tfoot>

<table>
  <thead>
    <!-- Заголовок таблицы -->
  </thead>
  <tbody>
    <!-- Тело таблицы -->
  </tbody>
  <tfoot>
    <!-- Нижняя часть таблицы -->
  </tfoot>
</table>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

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

Примеры использования

Вывод общей суммы товаров в таблице:

<table>
  <thead>
    <tr>
      <th>№</th>
      <th>Название товара</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Монитор Samsung</td>
      <td>12000 руб.</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Ноутбук HP</td>
      <td>30000 руб.</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Итого:</td>
      <td>42000 руб.</td>
    </tr>
  </tfoot>
</table>

Для чего использовать тег <tfoot>

• Добавить сводку данных, например, сумму чисел из столбца или среднее значение.
• Подвести итоги — вывести итоговые данные, например, в таблице с данными о продажах.
• Отформатировать таблицу — с помощью тега <tfoot> можно стилизовать и форматировать таблицы, добавив фон, рамки и шрифты.

Атрибуты тега <tfoot>

У тега нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <tfoot> должен использоваться как дочерний тег <table> и появляться после тегов <thead> и <tbody>. Его нельзя использовать вне таблицы.

Нюансы

Тег <tfoot> — необязательный. Таблица может иметь верхний и нижний колонтитул, но не обязана иметь ни то ни другое.

Поддержка браузерами

Тег поддерживается всеми основными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <tfoot> не существует.

Чем заменить тег

Если вы не хотите использовать тег <tfoot>, можете добиться аналогичной функциональности, используя <div>, <section> или <footer>.

Актуальность

Тег <tfoot> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.