<tfoot>
- 25 января 2023
Что делает тег
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023