7.1 Tag <caption>
Les tags <caption>, <thead>, <tbody> et <tfoot> sont utilisés
pour améliorer la structuration et le balisage sémantique des tableaux en HTML. Ils aident à organiser les données, rendant les tableaux
plus compréhensibles et accessibles tant pour les utilisateurs que pour les moteurs de recherche.
Tag <caption>
Le tag <caption> est utilisé pour ajouter un titre à un tableau. Il aide à décrire le contenu du tableau et le rend
plus compréhensible pour les utilisateurs et accessible pour les moteurs de recherche.
Syntaxe :
<table>
<caption>Titre du tableau</caption>
<!-- Contenu du tableau -->
</table>
Exemple :
<table>
<caption>Titre du tableau</caption>
<tr>
<th>Nom</th>
<th>Note</th>
</tr>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</table>
7.2 Tag <thead>
Le tag <thead> est utilisé pour regrouper les lignes d'en-tête du tableau. Il aide à séparer logiquement
l'en-tête du tableau de son contenu principal.
Syntaxe :
<table>
<thead>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
</tr>
</thead>
<!-- Contenu du tableau -->
</table>
Exemple :
<table>
<thead>
<tr>
<th>Nom</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 Tag <tbody>
Le tag <tbody> est utilisé pour regrouper la partie principale du contenu du tableau. Il aide à séparer
le contenu principal de l'en-tête et du « pied » du tableau.
Syntaxe :
<table>
<thead>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
</tr>
</thead>
<tbody>
<!-- Contenu du tableau -->
</tbody>
</table>
Exemple :
<table>
<thead>
<tr>
<th>Nom</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 Tag <tfoot>
Le tag <tfoot> est utilisé pour regrouper les lignes du « pied » (bas) du tableau. Il contient généralement
des informations résumées ou des totaux.
Syntaxe :
<table>
<thead>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
</tr>
</thead>
<tbody>
<!-- Contenu du tableau -->
</tbody>
<tfoot>
<tr>
<td>Total 1</td>
<td>Total 2</td>
</tr>
</tfoot>
</table>
Exemple complet :
<table>
<thead>
<tr>
<th>Nom</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Moyenne</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
C'est vraiment facile de se souvenir de tout ça :
Explication de la structure du tableau
<table>: le conteneur extérieur pour tout le tableau<caption>: le titre du tableau qui aide à en décrire le contenu<thead>: regroupe les lignes d'en-tête du tableau<tbody>: regroupe le contenu principal du tableau<tfoot>: regroupe les lignes du pied du tableau
Consolidons nos connaissances
Créons un tableau avec tous les tags étudiés et stylisons-le.
<table>
<caption>Résultats de l'examen</caption>
<thead>
<tr>
<th>Nom</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Moyenne</td>
<td>91.33</td>
</tr>
</tfoot>
</table>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION