Les tableaux

Une fiche horaire de bus est un tableau : chaque case n'a de sens qu'avec le titre de sa ligne et celui de sa colonne.

Les tableaux servent aux données

Utilise un tableau quand l'information a des lignes et des colonnes : une fiche horaire, une liste de prix, les résultats d'une enquête. À la fin des années 1990, beaucoup de sites se servaient de tableaux pour construire la mise en page entière, avec le menu dans une cellule et le contenu dans une autre. Cela pose de vrais problèmes. Les lecteurs d'écran annoncent chaque cellule avec sa ligne et sa colonne, si bien qu'un tableau de mise en page ressemble à un tableur incompréhensible, et les mises en page en tableau s'adaptent mal aux petits écrans. Aujourd'hui, la mise en page se fait avec CSS, et les tableaux sont réservés aux données.

Lignes, cellules et en-têtes

Un tableau se construit ligne par ligne. <table> enveloppe le tout, chaque <tr> (table row) est une ligne, et dans une ligne chaque <td> (table data) est une cellule. Les cellules qui étiquettent une ligne ou une colonne utilisent plutôt <th> (table header), que les navigateurs affichent par défaut en gras et centré. Chaque ligne doit avoir le même nombre de cellules, pour que les colonnes s'alignent.

<table>
  <caption>Bread prices, October 2026</caption>
  <thead>
    <tr><th scope="col">Loaf</th><th scope="col">Weight</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sourdough</th><td>800 g</td><td>6.50</td></tr>
    <tr><th scope="row">Rye</th><td>600 g</td><td>5.00</td></tr>
  </tbody>
</table>

Un tableau qui s'explique tout seul

Trois ajouts transforment une grille de cellules en un tableau que tout le monde peut lire. D'abord, <caption>, placé juste après la balise ouvrante <table>, donne un titre au tableau ; les lecteurs d'écran l'annoncent avant le contenu, pour que l'auditeur sache de quoi parle le tableau. Ensuite, l'attribut scope sur chaque <th> indique s'il étiquette une colonne (scope="col") ou une ligne (scope="row"). Grâce à lui, un lecteur d'écran peut lire Seigle, Prix, 5.00 au lieu d'un simple 5.00. Enfin, <thead>, <tbody> et <tfoot> regroupent les lignes d'en-tête, les lignes du corps et les éventuelles lignes de total. Ils rendent la structure claire, aident CSS à mettre en forme chaque partie et permettent aux navigateurs de répéter l'en-tête sur chaque page imprimée d'un long tableau.

Les cellules fusionnées

Une cellule peut s'étendre sur plusieurs colonnes avec colspan ou sur plusieurs lignes avec rowspan. Dans un emploi du temps de la semaine, une pause déjeuner qui couvre les cinq jours ouvrables peut être une seule cellule avec colspan="5". Quand une cellule s'étend, sa ligne a besoin de moins de cellules : si une ligne a normalement 6 cellules et que l'une d'elles a colspan="5", cette ligne ne contient que 2 cellules dans le HTML. Utilise la fusion quand elle reflète les données ; les tableaux très complexes sont difficiles à lire pour tout le monde, et diviser un grand tableau en deux plus simples est souvent préférable.

Les tableaux larges peuvent poser problème sur les téléphones. Un tableau ne peut pas passer à la ligne comme du texte, donc un tableau avec beaucoup de colonnes peut être plus large que l'écran. Une solution courante consiste à placer le tableau dans un élément qui défile horizontalement à lui seul, grâce à CSS, pour que le reste de la page ne s'élargisse pas aussi.

Garde les données de chaque cellule aussi simples que possible : une valeur par cellule, les unités dans l'en-tête (Prix en euros) plutôt que répétées dans chaque cellule, et pas de cellules vides en guise d'espaces. Un tableau construit ainsi est plus facile à lire à voix haute, plus facile à trier, et se colle proprement dans un tableur.