<table>

Description

L’élément <table> représente des données tabulaires : informations organisées en lignes et colonnes avec une relation entre elles. Il contient des éléments <thead>, <tbody>, <tfoot>, <tr>, <th> et <td>. Les tableaux HTML sont strictement réservés aux données tabulaires — jamais pour la mise en page.

Syntaxe

<table>
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Valeur 1</td>
      <td>Valeur 2</td>
    </tr>
  </tbody>
</table>

Exemples

Tableau de données avec en-têtes :

<table>
  <caption>Comparatif des navigateurs</caption>
  <thead>
    <tr>
      <th scope="col">Navigateur</th>
      <th scope="col">Part de marché</th>
      <th scope="col">Moteur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Chrome</td>
      <td>65 %</td>
      <td>Blink</td>
    </tr>
    <tr>
      <td>Firefox</td>
      <td>3 %</td>
      <td>Gecko</td>
    </tr>
  </tbody>
</table>

Notes

Jamais pour la mise en page : utiliser <table> pour faire de la mise en page (colonnes, grilles) est une pratique dépassée et inaccessible. Utiliser CSS Flexbox ou Grid à la place.

Accessibilité : un tableau complexe doit avoir un <caption>, des <th> avec scope, et éventuellement aria-describedby pointant vers un résumé. Les lecteurs d’écran lisent les tableaux cellule par cellule en annonçant les en-têtes correspondants.