HTML Тег <thead>
Приклад
HTML таблиця з елементами <thead>, <tbody> та <tfoot>:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <thead> використовується для групування вмісту заголовка в таблиці HTML.
Елемент <thead> використовується в поєднанні з елементами <tbody> та <tfoot> для визначення кожної частини таблиці (header, body, footer).
Браузери можуть використовувати ці елементи для прокручування тіла таблиці незалежно від верхнього та нижнього колонтитулів. Крім того, під час друку великої таблиці, яка охоплює кілька сторінок, ці елементи можуть увімкнути друк верхнього та нижнього колонтитулів таблиці вгорі та внизу кожної сторінки.
Примітка: Елемент <thead> елемент повинен мати один або кілька тегів <tr> всередині.
Тег <thead> слід використовувати в такому контексті: як дочірній елемент елемента <table> після будь-якого <caption> та <colgroup> елемента, та перед будь-яким елементом <tbody>, <tfoot> та <tr>.
Підказка: Елементи <thead>, <tbody> та <tfoot> за умовчанням не впливатимуть на макет таблиці. Однак ви можете використовувати CSS для стилізації цих елементів (див. приклад нижче)!
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <thead> | Так | Так | Так | Так | Так |
Глобальні атрибути
Тег <thead> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <thead> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Стилізація елементів <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>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Спробуйте самі »
Приклад
Як вирівняти вміст всередині <thead> (за допомогою CSS):
<table style="width:100%">
<thead style="text-align:left">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Спробуйте самі »
Приклад
Як вертикально вирівняти вміст усередині <thead> (за допомогою CSS):
<table style="width:50%;">
<thead style="vertical-align:bottom">
<tr style="height:100px">
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Спробуйте самі »
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <thead> з наступними значеннями за замовчуванням:
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
