Balise thead
La balise thead définit la partie supérieure d'un tableau.
Elle est utilisée pour regrouper les lignes de manière
à pouvoir appliquer immédiatement des styles CSS
à un groupe spécifique. Un tableau ne peut
contenir qu'une seule balise thead.
La balise thead est souvent utilisée conjointement
avec tbody
et tfoot
pour définir la partie supérieure, la partie principale
et la partie inférieure d'un tableau HTML.
Exemple
Ajoutons une couleur de texte rouge au groupe de lignes
regroupées par la balise thead 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>
thead {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Exemple
Ici, thead n'est pas en haut et tfoot
n'est pas en bas, néanmoins le navigateur les placera
à 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>
table, td, th {
border: 1px solid black;
}
:
