English

<tfoot>

Ajouter un pied de tableau : totaux, moyennes, résumés

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • tableaux

<tfoot> — Le pied du tableau

La balise <tfoot> regroupe les lignes de synthèse d'un tableau, totaux, moyennes, sous-totaux, recapitulatifs. Elle se place après <tbody> (ou avant, le navigateur la rendra toujours en bas).

Quand l'utiliser

Ton tableau a une ligne de total ou de résumé en bas. Au lieu de mettre cette ligne dans <tbody>, utilise <tfoot> pour la distinguer sémantiquement des données brutes.

Ce que tu gagnes

Accessibilité : les lecteurs d'écran identifient <tfoot> comme une section distincte du corps de données. L'utilisateur peut sauter directement au résumé sans parcourir toutes les lignes de données.

Exemple de code

<table>
  <caption>Monthly expenses</caption>
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hosting</td>
      <td>45</td>
    </tr>
    <tr>
      <td>Domain</td>
      <td>12</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>57</td>
    </tr>
  </tfoot>
</table>

Pour aller plus loin