HTML таблица с элементами thead, tbody, и tfoot:
table
thead
tr
thМесяц/th
thЭкономия/th
/tr
/thead
tbody
tr
tdЯнварь/td
td$100/td
/tr
tr
tdФевраль/td
td$80/td
/tr
/tbody
tfoot
tr
tdСумма/td
td$180/td
/tr
/tfoot
/table
Попробуйте сами »
Определение и использование thead
Тег thead используется для группировки содержимого заголовка в HTML таблице.
Тег thead используется в сочетании с элементами tbody и tfoot для указания каждой части таблицы (header, body, footer).
Браузеры могут использовать эти элементы для включения прокрутки тела таблицы независимо от верхнего и нижнего колонтитулов. Кроме того, при печати большой таблицы, охватывающей несколько страниц, эти элементы могут позволить печатать верхний и нижний колонтитулы таблицы в верхней и нижней частях каждой страницы.
Примечание: Тег thead должен иметь один или несколько тегов tr внутри.
Тег thead должен использоваться в следующем контексте: Как ребенок элемент table, после любого элемента caption и colgroup, и перед любым элементом tbody, tfoot, и tr.
Совет: Элементы thead, tbody, и tfoot по умолчанию не влияют на макет таблицы. Однако вы можете использовать CSS для стилизации этих элементов (см. пример ниже)!
Поддержка браузеров thead
| Элемент | |||||
|---|---|---|---|---|---|
| thead | Да | Да | Да | Да | Да |
Глобальные атрибуты thead
Тег thead также поддерживает Глобальные атрибуты в HTML.
События атрибутов thead
Тег thead также поддерживает События атрибутов в HTML.
Еще примеры thead
Стили thead, tbody, и tfoot с CSS:
html
head
style
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
/style
/head
body
table
thead
tr
thМесяц/th
thЭкономия/th
/tr
/thead
tbody
tr
tdЯнварь/td
td$100/td
/tr
tr
tdФевраль/td
td$80/td
/tr
/tbody
tfoot
tr
tdСумма/td
td$180/td
/tr
/tfoot
/table
Попробуйте сами »
Как выровнить содержимое внутри thead (с помощью CSS):
table style="width:100%"
thead
style="text-align:left"
tr
thМесяц/th
thЭкономия/th
/tr
/thead
tbody
tr
tdЯнварь/td
td$100/td
/tr
tr
tdФевраль/td
td$80/td
/tr
/tbody
/table
Попробуйте сами »
Как выровнить содержимое по вертикали внутри thead (с помощью CSS):
table style="width:50%;"
thead
style="vertical-align:bottom"
tr
style="height:100px"
thМесяц/th
thЭкономия/th
/tr
/thead
tbody
tr
tdЯнварь/td
td$100/td
/tr
tr
tdФевраль/td
td$80/td
/tr
/tbody
/table
Попробуйте сами »
Настройки CSS по умолчанию thead
Большинство браузеров будут отображать элемент thead со следующими значениями по умолчанию:
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}