Тег tfoot
Тег tfoot задает нижнюю часть таблицы.
Используется для группировки рядов таким
образом, чтобы сразу к некоторой группе можно
было применить CSS стили. В одной таблице
может быть только один тег tfoot.
Тег tfoot часто используется совместно
с thead
и tbody
для задания верхней части, основной части
и нижней части HTML таблицы. По умолчанию
браузер поставит содержимое tfoot
в нижнюю часть таблицы, а thead -
в верхнюю.
Пример
Давайте группе рядов, объединенных тегом
tfoot, зададим красный цвет текста
с помощью свойства color:
<table>
<thead>
<tr>
<th>Name</th>
<th>Surn</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>surn1</td>
<td>200$</td>
</tr>
<tr>
<td>name2</td>
<td>surn2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>count: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Пример
А здесь, давайте посмотрим, thead
стоит не сверху, а tfoot не снизу,
тем не менее браузер их расставляет по своим
местам:
<table>
<tfoot>
<tr>
<td>count: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>name1</td>
<td>surn1</td>
<td>200$</td>
</tr>
<tr>
<td>name2</td>
<td>surn2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Name</th>
<th>Surn</th>
<th>Salary</th>
</tr>
</thead>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
