Тег <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 | Вертикальное выравнивание |
| class | CSS-классы |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрытый элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| style | Инлайновые стили |
| tabindex | Порядок фокусировки |
| title | Всплывающая подсказка |
| translate | Возможность перевода |
| role | ARIA-роль |
| aria-* | ARIA-атрибуты |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 4.0 | 1.0 | 1.0 | 1.0 | 1.0 |