HTML — Tableaux

Les tableaux HTML expriment des relations entre lignes et colonnes. Réservez-les aux données et associez chaque cellule aux en-têtes qui lui donnent son sens.

Les tableaux expriment des relations entre des données organisées en lignes et en colonnes. Ils conviennent aux plannings, aux comparatifs, aux mesures et aux rapports, mais pas à la mise en page. Un tableau accessible indique ce qu’il présente et relie chaque cellule de données aux en-têtes qui permettent de la comprendre.

Construire une structure de tableau claire

caption donne un titre au tableau, thead regroupe les en-têtes de colonnes, tbody contient les données principales et tfoot peut en présenter une synthèse. th désigne une cellule d’en-tête et td une cellule de données. scope=row ou scope=col précise explicitement à quoi s’applique un en-tête simple.

<table>
  <caption>Planning de l’atelier</caption>
  <thead>
    <tr>
      <th scope="col">Sujet</th>
      <th scope="col">Jour</th>
      <th scope="col">Durée</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML sémantique</th>
      <td>Lundi</td>
      <td>90 minutes</td>
    </tr>
  </tbody>
</table>

• Rédigez un titre concis avec caption.
• Utilisez th pour les véritables en-têtes.
• Ajoutez scope pour les associations simples entre lignes et colonnes.
• Conservez le même ordre dans le code source et à l’écran.