Тег <tfoot> HTML нижний колонтитул таблицы

Рейтинг: 5 из 5, голосов 2
+++++

Тег <tfoot> определяет границы нижнего колонтитула таблицы HTML. Используется в HTML таблицах определенных тегом <table>.

К группе тегов отвечающих за различные части HTML таблиц относятся: тег <thead> - верхний колонтитул, <tbody> - основная часть, <tfoot> - нижний колонтитул.

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

HTML тег <tfoot> должен располагаться внутри тега <table> после тегов <caption>, <col>, <colgroup>, <thead> и перед тегом <tbody>.

Внутри тега <tfoot> должен быть один или несколько элементов <tr> - строк таблицы.

Стоит отметить, что теги <thead>, <tbody>, <tfoot> по умолчанию не изменяют стили таблицы. Для этого используйте CSS.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<tfoot>элементы tr с HTML контентом</tfoot>

Отображение в браузере

Ячейка 1 Ячейка 2
Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8
Ячейка 3 Ячейка 4

Пример использования <tfoot> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Таблица с tfoot</title>
</head>
<body>
<table>
<!-- Ячейки верхнего колонтитула -->
<thead>
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
</thead>
<tfoot>
<!-- Ячейки нижнего колонтитула -->
<tr>
<th>Ячейка 5</th>
<th>Ячейка 6</th>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
</tfoot>
<tbody>
<!-- Основная часть таблицы -->
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>
</body>
</html>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<tfoot> Да Да Да Да Да

Атрибуты <tfoot>

В HTML5 у тега <tfoot> нет атрибутов.

Устаревшие атрибуты

Атрибут Значения Описание
align left
right
center
justify
Задает правило выравнивания содержимого по горизонтали. В HTML5 используйте CSS.
valign top
middle
bottom
baseline
Задает правило выравнивания содержимого по вертикали. В HTML5 используйте CSS.
Оцените, насколько полезна эта статья
+++++
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.