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