Quand un tableau devient un peu plus riche, il est utile de distinguer son en-tête, ses données, son pied et sa légende. Vous allez voir comment utiliser thead, tbody, tfoot et caption pour obtenir un tableau plus clair.
Pourquoi structurer un tableau ?
Au début, un tableau simple fonctionne très bien avec seulement <table>, quelques lignes <tr> et des cellules <th> ou <td>.
Mais dès que vous affichez plusieurs lignes, un total ou un petit titre, il devient plus pratique de séparer les différentes zones du tableau.
Cette structure rend le code plus facile à lire. Elle aide aussi à mieux comprendre le rôle de chaque partie :
- l'en-tête pour nommer les colonnes
- le corps pour contenir les données
- le pied pour afficher un résumé ou un total
- la légende pour donner un titre au tableau
À revoir avant d'aller plus loin
Si vous n'êtes pas encore à l'aise avec <table>, <tr>, <th> et <td>, relisez d'abord le cours Les tableaux HTML. Il pose les bases utiles pour comprendre la suite.
Créer une en-tête avec <thead>
La balise <thead> sert à regrouper la partie haute du tableau. C'est généralement là que vous placez les titres de colonnes.
À l'intérieur de <thead>, vous écrivez toujours des lignes <tr>, puis des cellules d'en-tête <th>.
<table>
<thead>
<tr>
<th>Produit</th>
<th>Prix</th>
</tr>
</thead>
</table>
| Produit | Prix |
|---|
Ici, l'en-tête contient simplement les noms des deux colonnes.
Sur un petit tableau, <thead> n'est pas obligatoire pour que le navigateur affiche les choses correctement. En revanche, cette balise devient très utile pour mieux organiser votre code.
Gérer la donnée avec <tbody>
La balise <tbody> contient le corps du tableau, c'est-à-dire les lignes de données.
C'est souvent la plus grosse partie du tableau. Vous y placez les lignes qui décrivent réellement vos informations.
<table>
<thead>
<tr>
<th>Produit</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cahier</td>
<td>4,50 €</td>
</tr>
<tr>
<td>Stylo</td>
<td>1,20 €</td>
</tr>
</tbody>
</table>
| Produit | Prix |
|---|---|
| Cahier | 4,50 € |
| Stylo | 1,20 € |
Retenez surtout ceci : thead nomme, tbody contient. Cette séparation très simple évite déjà beaucoup de confusion quand un tableau commence à grandir.
Créer un footer avec <tfoot>
La balise <tfoot> sert à créer le pied du tableau. On l'utilise souvent pour afficher un total, une moyenne ou une information de résumé.
Le pied du tableau reste dans la même logique : il contient lui aussi des lignes <tr> et des cellules.
<table>
<thead>
<tr>
<th>Produit</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cahier</td>
<td>4,50 €</td>
</tr>
<tr>
<td>Stylo</td>
<td>1,20 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>5,70 €</td>
</tr>
</tfoot>
</table>
| Produit | Prix |
|---|---|
| Cahier | 4,50 € |
| Stylo | 1,20 € |
| Total | 5,70 € |
Le pied du tableau sert ici à faire ressortir le total final.
Attention ! <tfoot> ne remplace pas le bas d'une page web. Il correspond seulement au pied du tableau.
Ajouter une légende avec <caption>
La balise <caption> permet d'ajouter un titre ou une légende directement au tableau.
Elle se place juste après l'ouverture de <table>. Son rôle est d'expliquer rapidement ce que montre le tableau.
<table>
<caption>Tarifs de la papeterie</caption>
<thead>
<tr>
<th>Produit</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cahier</td>
<td>4,50 €</td>
</tr>
<tr>
<td>Stylo</td>
<td>1,20 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>5,70 €</td>
</tr>
</tfoot>
</table>
| Produit | Prix |
|---|---|
| Cahier | 4,50 € |
| Stylo | 1,20 € |
| Total | 5,70 € |
Grâce à cette légende, le lecteur comprend tout de suite à quoi correspond le tableau, sans devoir lire chaque cellule une par une.
Si vous réunissez tout ce que vous avez vu dans ce cours, vous obtenez un tableau bien structuré, plus lisible et plus simple à maintenir.
Vous pouvez maintenant passer à des tableaux un peu plus avancés, par exemple quand plusieurs cellules doivent être fusionnées.