English

<tbody>

Remplir le corps du tableau avec des données

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • tableaux

<tbody> + <tr> + <td> — Le corps du tableau

<tbody> regroupe le corps de données d'un tableau. <tr> représente une ligne et <td> une cellule de données. Ensemble, ils forment la grille principale du tableau, distincte des en-têtes (<thead>) et du pied (<tfoot>).

Quand l'utiliser

Tu as un tableau avec des données. Chaque ligne de données va dans un <tr> à l'intérieur de <tbody>. Chaque valeur va dans un <td>. Même si le navigateur ajoute implicitement un <tbody>, l'écrire explicitement rend ton intention claire et facilite le stylage CSS.

Ce que tu gagnes

Accessibilité : la separation <thead> / <tbody> / <tfoot> permet aux lecteurs d'écran de distinguer les en-têtes des données et des totaux. L'utilisateur peut naviguer entre ces sections sans parcourir chaque cellule.

Exemple de code

<table>
  <caption>Server response times (ms)</caption>
  <thead>
    <tr>
      <th scope="col">Endpoint</th>
      <th scope="col">P50</th>
      <th scope="col">P99</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>/api/users</td>
      <td>45</td>
      <td>120</td>
    </tr>
    <tr>
      <td>/api/orders</td>
      <td>62</td>
      <td>340</td>
    </tr>
  </tbody>
</table>

Pour aller plus loin