Етикет 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;
}
:
