Sémantique HTML
Un tableau HTML permet de présenter des données de manière organisée.
Ce qu’il faut retenir
Un tableau HTML permet de présenter des données de manière organisée.
Avant l’arrivée du CSS et des propriétés flexbox et grid notamment, les tableaux servaient aussi à la présentation de l’information. Cette façon de faire est à exclure aujourd’hui.
Code HTML
Éléments HTML des tableaux
| Élément HTM | Utilisation |
|---|---|
<table>...</table> |
Déclaration du tableau |
<caption>...</caption> |
Titre du tableau |
<colgroup>...</colgroup> et <col>...</col> |
Groupe de colonnes au sein d'un tableau |
<thead>...</thead> |
Section d'entête du tableau |
<tbody>...</tbody> |
Section du corps du tableau |
<tfoot>...</tfoot> |
Section de pied du tableau |
<tr>...</tr> |
Déclaration de ligne de tableau |
<th>...</th> |
Déclaration de cellule d'entête de tableau |
<td>...</td> |
Déclaration de cellule de tableau |
_N.B. Dans le cas d’un tableau de données complexe, on pourra utiliser l’attribut summary pour proposer un résumé du tableau. Voir la rubrique Tableaux complexes.
Attributs HTML des tableaux
colspan: permet de fusionner des colonnes. Exemple pour une fusion de 3 colonnes :<th colspan="3">rowspan: permet de fusionner des lignes. Exemple pour une fusion de 2 lignes :<th rowspan="2">
Attributs spécifiques pour les lecteur d’écran
scope: permet de spécifier sur quoi porte la cellule ;scopeest un attribut deth- Exemple pour une cellule portant sur toute une colonne :
<th scope="col"> - Exemple pour une cellule portant sur toute une ligne :
<th scope="row">
- Exemple pour une cellule portant sur toute une colonne :
idetheaders: permet de créer une association entre plusieurs entêtes. Voir la rubrique Tableaux complexes.