Balise tfoot
La balise tfoot définit la partie inférieure d'un tableau.
Elle est utilisée pour regrouper des lignes de manière
à pouvoir appliquer immédiatement des styles CSS
à un groupe spécifique. Un tableau ne peut
contenir qu'une seule balise tfoot.
La balise tfoot est souvent utilisée conjointement
avec thead
et tbody
pour définir la partie supérieure, la partie principale
et la partie inférieure d'un tableau HTML. Par défaut,
le navigateur placera le contenu de tfoot
en bas du tableau, et thead -
en haut.
Exemple
Appliquons la couleur rouge au texte d'un groupe
de lignes regroupées par la balise
tfoot, en utilisant la propriété
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;
}
:
Exemple
Ici, regardons comment thead
n'est pas en haut, et tfoot n'est pas en bas,
néanmoins le navigateur les place à leurs
emplacements respectifs :
<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;
}
:
