Тег <tfoot>

Описание

Тег <tfoot> (table footer) определяет нижний колонтитул таблицы, содержащий итоговые данные или сводную информацию. Этот семантический элемент группирует строки таблицы, которые должны отображаться в её конце, даже если технически расположены перед <tbody>.

Базовый синтаксис:
<table> <thead> <tr><th>Продукт</th><th>Цена</th></tr> </thead> <tfoot> <tr><td>Итого</td><td>5000 ₽</td></tr> </tfoot> <tbody> <tr><td>Ноутбук</td><td>4500 ₽</td></tr> <tr><td>Чехол</td><td>500 ₽</td></tr> </tbody> </table>

Ключевые особенности:

  • Должен содержать одну или несколько строк (<tr>)
  • Может включать как обычные ячейки (<td>), так и заголовочные (<th>)
  • По спецификации HTML должен идти до <tbody>, но отображается внизу
  • Поддерживает все глобальные атрибуты HTML
  • Улучшает доступность таблиц для скринридеров
Пример с группировкой данных:
<table> <caption>Месячные продажи</caption> <thead> <tr> <th>Месяц</th> <th>Продажи</th> <th>Процент</th> </tr> </thead> <tfoot> <tr> <th>Итого за год</th> <td>1,240,000 ₽</td> <td>100%</td> </tr> <tr> <td colspan="3">* Данные предварительные</td> </tr> </tfoot> <tbody> <tr><td>Январь</td><td>100,000 ₽</td><td>8%</td></tr> <!-- Остальные месяцы --> </tbody> </table>

Стилизация через CSS:

<style> tfoot { background-color: #f5f5f5; font-weight: bold; } tfoot tr:first-child { border-top: 2px solid #333; } tfoot td, tfoot th { padding: 12px 15px; text-align: right; } tfoot tr:last-child { font-size: 0.9em; color: #666; text-align: center; } /* Подсветка при наведении */ tfoot tr:hover { background-color: #e9e9e9; } </style>

Рекомендации по использованию:

  • Используйте для подведения итогов (суммы, средние значения)
  • Размещайте перед <tbody> в разметке
  • Для сложных таблиц указывайте атрибуты scope и headers
  • Не используйте для декоративных целей (применяйте CSS)
  • Сочетайте с <thead> и <tbody> для полной семантики

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

Атрибуты

align Горизонтальное выравнивание
char Символ выравнивания
charoff Смещение выравнивания
valign Вертикальное выравнивание
accesskey Горячая клавиша
class CSS-классы
contenteditable Редактируемость
data-* Пользовательские данные
dir Направление текста
hidden Скрытый элемент
id Уникальный идентификатор
lang Язык содержимого
style Инлайновые стили
tabindex Порядок фокусировки
title Всплывающая подсказка
translate Возможность перевода
role ARIA-роль
aria-* ARIA-атрибуты

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