HTML - тег <tfoot> определяет нижний колонтитул HTML-таблицы. Он используется вместе с элементами <thead> и <tbody>, которые определяют заголовок и тело таблицы соответственно.
Тег <tfoot> - синтаксис и код
Тег <tfoot> представлен парами. Содержимое записывается между открывающим (<tfoot>) и закрывающим (</tfoot>) тегами.
Пример кода HTML таблиц с элементами <thead>, <tbody> и <tfoot>:
<table>
<thead>
<tr>
<th>Месяц</th>
<th>Экономия</th>
</tr>
</thead>
<tbody>
<tr>
<td>Январь</td>
<td>10000 ₽</td>
</tr>
<tr>
<td>Февраль</td>
<td>5000 ₽</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Итого:</td>
<td>15000 ₽</td>
</tr>
</tfoot>
</table>
| Месяц |
Экономия |
| Январь |
10000 ₽ |
| Февраль |
5000 ₽ |
| Итого: |
15000 ₽ |
Определение и использование
- HTML - тег
<tfoot> используется для группировки содержимого нижнего колонтитула в таблице HTML.
- Элемент
<tfoot> используется вместе с элементами <thead> и <tbody> для указания каждой части таблицы (нижний колонтитул, заголовок, тело).
Браузеры могут использовать эти элементы для прокрутки тела таблицы независимо от верхнего и нижнего колонтитула. Кроме того, при печати большой таблицы, занимающей несколько страниц, эти элементы позволяют печатать верхний и нижний колонтитулы таблицы вверху и внизу каждой страницы.
Тег <tfoot> необходимо использовать в следующем контексте: В качестве дочернего элемента <table>, после любых элементов <caption>, <colgroup>, <thead> и <tbody>.
✪ Рекомендация: элементы <thead>, <tbody> и <tfoot> по умолчанию не влияют на макет таблицы. Однако вы можете использовать CSS для стилизации этих элементов.
★
Примечание: внутри элемента
<tfoot> должен быть один или несколько тегов
<tr>.
Поддержка <tfoot> браузерами
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
Еще примеры
Пример оформления <thead>, <tbody> и <tfoot> с помощью CSS:
<html>
<head>
<style>
thead {color: green;}
tbody {color: yellow;}
tfoot {color: red;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Месяц</th>
<th>Экономия</th>
</tr>
</thead>
<tbody>
<tr>
<td>Январь</td>
<td>10000 ₽</td>
</tr>
<tr>
<td>Февраль</td>
<td>5000 ₽</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Итого:</td>
<td>15000 ₽</td>
</tr>
</tfoot>
</table>
</body>
</html>
| Месяц |
Экономия |
| Январь |
10000 ₽ |
| Февраль |
5000 ₽ |
| Итого: |
15000 ₽ |
Атрибуты
Тег <tfoot> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <tfoot> также поддерживает атрибуты событий в HTML
Связанные страницы
Руководство по HTML: таблицы HTML
Настройки CSS по умолчанию
Большинство браузеров отображают элемент tfoot со следующими значениями по умолчанию:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
