Синтаксис
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>
<tr>
<td>...</td>
</tr>
</tfoot>
</table>
Описание
Тег <tfoot> (от англ. table foot — подвал таблицы) представляет собой нижний колонтитул HTML-таблицы. Предназначен для информации о колонках таблицы.
Используется вместе с тегами <thead> (заголовок) и <tbody> (содержание).
Внимание!
В таблице разрешается использовать только один элемент <tfoot> и он должен содержать хотя бы один тег <tr>.
В HTML5 элемент <tfoot> идёт после всех тегов <caption>, <colgroup>, <thead>, <tbody>. Если указанных элементов в таблице нет, тогда <tfoot> идёт после всех тегов <tr>.
Примечание!
Теги <thead>, <tbody>, <tfoot> и <th> не является обязательными элементами таблицы, но мы рекомендуем включать их в таблицу, так как они помогают лучше структурировать контент, а также помогает поисковым машинам лучше индексировать таблицы.
Атрибуты, которые можно использовать в теге <tfoot>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.
Атрибуты
Атрибут | Значение | Описание |
align | right left center justify char |
Выравнивает содержимое элемента <tfoot>. |
bgcolor | rgb(x,x,x) #xxxxxx название цвета |
Задает цвет фона ячеек внутри тега <tfoot>. |
char | символ |
Выравнивает содержимое элемента по заданному символу. |
charoff | число |
Выравнивает содержимое элементе с указанного в атрибуте символа, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). |
valign | top bottom middle baseline |
Задает вертикальное выравнивание содержимого элемента. |
Пример
HTML-код:
</thead>
</tbody>
<tfoot>
Отображение в браузере:
№ | Наименование | Цена, р |
---|---|---|
Сумма | 10 | |
1 | Молоко | 3 |
2 | Батон | 2 |
3 | Сметана | 5 |
Параметры CSS по умолчанию
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
Поддержка браузера
Элемент |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
<tfoot> | Да | Да | Да | Да | Да |
Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!
Только свежие новости программирования и технологий каждый день.
Комментарии