English

<table>

Présenter des données en lignes et colonnes, pas pour la mise en page

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • tableaux

<table> — Le tableau de données

La balise <table> représente des données tabulaires, des informations organisées en lignes et colonnes avec des relations entre elles. Ce n'est pas un outil de mise en page.

Quand l'utiliser

Tu veux présenter un comparatif de prix, un calendrier, des statistiques, un emploi du temps. Les données ont une structure en grille ou chaque cellule a un sens par rapport a son en-tête de ligne et de colonne. Si tu veux juste aligner des éléments visuellement, utilise CSS Grid ou Flexbox.

Ce que tu gagnes

Accessibilité : les lecteurs d'écran naviguent cellule par cellule et annoncent les en-têtes associés. Sans <table>, l'utilisateur entend une liste plate sans structure. Avec une <div> stylisée en grille, aucune relation en-tête/cellule n'est transmise.

Exemple de code

<table>
  <caption>Quarterly revenue by region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Europe</th>
      <td>12 000</td>
      <td>14 500</td>
    </tr>
    <tr>
      <th scope="row">Asia</th>
      <td>9 800</td>
      <td>11 200</td>
    </tr>
  </tbody>
</table>

Pour aller plus loin