Apprends à présenter des données tabulaires en utilisant des tableaux HTML avec une structure appropriée incluant des en-têtes, des sections de corps et des légendes.
Les tableaux HTML sont conçus pour afficher des données tabulaires — des informations qui appartiennent naturellement à des lignes et des colonnes, comme des plannings, des statistiques, des tableaux de comparaison ou des données financières.
Un tableau est construit à partir de plusieurs éléments travaillant ensemble :
<table> — le conteneur pour l'ensemble du tableau<tr> — une ligne de tableau<th> — une cellule d'en-tête de tableau (en gras et centrée par défaut)<td> — une cellule de données de tableau (contenu régulier)Important : Les tableaux ne doivent pas être utilisés pour la mise en page. Aux débuts du web, les développeurs utilisaient des tableaux pour positionner le contenu sur la page, mais cette pratique est obsolète. Utilise le CSS pour la mise en page et réserve les tableaux pour les véritables données.
<table>
<caption>Notes des étudiants — Semestre d'automne</caption>
<thead>
<tr>
<th>Nom</th>
<th>Matière</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Mathématiques</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>Sciences</td>
<td>B+</td>
</tr>
<tr>
<td>Carol</td>
<td>Anglais</td>
<td>A-</td>
</tr>
</tbody>
</table>Un tableau bien structuré est divisé en sections logiques :
<thead> enveloppe la ou les lignes d'en-tête. Cela indique au navigateur et aux technologies d'assistance quelles cellules sont des étiquettes de colonnes. Lorsqu'un long tableau est imprimé, certains navigateurs répètent le <thead> sur chaque page.
<tbody> enveloppe les lignes de données principales. Tu peux avoir plusieurs éléments <tbody> pour regrouper les lignes en catégories.
<tfoot> enveloppe les lignes de pied de page, souvent utilisées pour les totaux ou les résumés. Les navigateurs peuvent afficher le pied de page en bas du tableau indépendamment de l'endroit où tu le places dans le balisage.
<caption> fournit un titre ou une description pour le tableau. Il doit être le premier enfant de l'élément <table>. Les légendes sont précieuses pour l'accessibilité — les lecteurs d'écran annoncent la légende avant de lire les données du tableau, donnant aux utilisateurs le contexte de ce que contient le tableau.
Parfois, une cellule doit s'étendre sur plusieurs colonnes ou lignes. HTML fournit deux attributs pour cela :
colspan — fait qu'une cellule s'étend sur plusieurs colonnesrowspan — fait qu'une cellule s'étend sur plusieurs lignes<table>
<tr>
<th colspan="2">Nom complet</th>
<th>Âge</th>
</tr>
<tr>
<td>Prénom : Alice</td>
<td>Nom : Smith</td>
<td>28</td>
</tr>
</table>Dans cet exemple, l'en-tête « Nom complet » s'étend sur deux colonnes, s'alignant avec les deux cellules de nom en dessous. Utilise ces attributs avec parcimonie — une fusion complexe peut rendre les tableaux plus difficiles à lire et à maintenir.
Quel est le rôle de l'élément <caption> dans un tableau ?