Тег HTML <tfoot>
Тег <code><tfoot></code> определяет нижний колонтитул (подвал) таблицы HTML. Он используется вместе с элементами <code><thead></code> и <code><tbody></code>, которые определяют заголовок и тело таблицы соответственно.
Тег <code><tfoot></code> должен быть объявлен внутри элемента <code><table></code>, после элементов <code><caption></code> и <code><colgroup></code> (если они есть). Обратите внимание, что в исходном коде <code><tfoot></code> должен располагаться перед <code><tbody></code>, хотя браузеры всегда отображают его в нижней части таблицы.
DANGER
Тег <code><tfoot></code> должен содержать как минимум один тег <code><tr></code>.
TIP
Элементы <code><thead></code>, <code><tbody></code> и <code><tfoot></code> по умолчанию не влияют на макет таблицы. Используйте свойства CSS для настройки внешнего вида таблицы.
Синтаксис
Тег <code><tfoot></code> используется парами. Содержимое записывается между открывающим (<code><tfoot></code>) и закрывающим (<code></tfoot></code>) тегами.
Тег HTML <code><tfoot></code>
<table>
<thead> ... </thead>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
<tbody> ... </tbody>
</table>Пример использования тега HTML <code><tfoot></code>:
Тег HTML <code><tfoot></code>
<!DOCTYPE html>
<html>
<head>
<title>The title of the document.</title>
</head>
<body>
<table style="width: 400px; border-collapse: collapse;" border="1">
<caption>
FIFA World Cup 2018 Top Goalscorers
<hr />
</caption>
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th>Goal</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">Harry Kane - the best player!</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Harry Kane</td>
<td>England</td>
<td>6</td>
</tr>
<tr>
<td>Christiano Ronaldo</td>
<td>Portugal</td>
<td>4</td>
</tr>
<tr>
<td>Neymar</td>
<td>Brazil</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>Результат
Тег <code><tfoot></code> и другие теги для обобщения содержимого таблицы
Элемент <code><tfoot></code> определяет секцию нижнего колонтитула для таблицы, которая обычно содержит сводные или агрегированные данные. В исходном коде он должен располагаться перед элементом <code><tbody></code>, но браузеры всегда отображают его в нижней части.
Используйте элементы <code><thead></code>, <code><tbody></code> и <code><tfoot></code> для структурирования таблиц, содержащих сложные наборы данных. Эти элементы помогают организовать содержимое таблицы. Чтобы включить независимую прокрутку тела таблицы, примените свойства CSS overflow.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | right, left, center, justify, char | Устанавливает горизонтальное выравнивание содержимого внутри элемента <code><tfoot></code>. Этот атрибут не поддерживается в HTML5. |
| bgcolor | bgcolor | Устанавливает цвет фона строк внутри элемента <code><tfoot></code>. Этот атрибут не поддерживается в HTML5. |
| char | character | Указывает выравнивание содержимого внутри элемента <code><tfoot></code> по заданному символу. Используется только при атрибуте align="char". Этот атрибут не поддерживается в HTML5. |
| charoff | number | Указывает количество символов, на которое содержимое внутри элемента <code><tfoot></code> будет смещено от символа, указанного атрибутом char. Используется только при атрибуте align="char". Этот атрибут не поддерживается в HTML5. |
| valign | top, bottom, middle, baseline | Указывает вертикальное выравнивание содержимого внутри элемента <code><tfoot></code>. Этот атрибут не поддерживается в HTML5. |
Примечание: Все перечисленные выше атрибуты устарели в HTML5. Используйте CSS для стилизации.
Тег <code><tfoot></code> также поддерживает Глобальные атрибуты и Атрибуты событий.
Как стилизовать тег HTML <code><tfoot></code>
tfoot {
background-color: #f2f2f2;
font-weight: bold;
}Практика
Какова цель тега HTML tfoot и где он обычно размещается в таблице?