HTML Academy · Leçon

Structure thead, tbody et tfoot

Organisez les lignes d’un tableau en sections sémantiques d’en-tête, de corps et de pied de tableau.

Leçon 2 sur 414 étapes

Structure thead, tbody et tfoot est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Sections d’un tableau

Un tableau HTML complet comporte trois sections facultatives, mais recommandées :

<thead> — lignes d’en-tête
<tbody> — lignes du corps (données principales)
<tfoot> — lignes du pied de tableau (totaux, récapitulatifs)

thead

L’élément <thead> contient les lignes d’en-tête :

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

tbody

L’élément <tbody> contient les principales lignes de données :

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

tfoot

L’élément <tfoot> contient les lignes du pied de tableau — généralement des totaux ou des récapitulatifs :

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

Tableau structuré complet

Un tableau complet avec les trois sections :

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

Pourquoi utiliser thead, tbody et tfoot ?

Avantages de la structure des tableaux :

Sémantique — les lecteurs d’écran comprennent la différence entre l’en-tête, les données et le récapitulatif
Ciblage CSS — stylisez les sections indépendamment
Impression — thead se répète sur chaque page imprimée
Défilement — faites défiler tbody indépendamment avec la propriété CSS overflow

tbody avec défilement

Faites défiler uniquement le corps tout en gardant l’en-tête fixe :

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

tbody implicite

Si vous omettez <tbody>, le navigateur en ajoute un automatiquement :

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

Plusieurs éléments tbody

Un tableau peut contenir plusieurs groupes <tbody> :

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

Styliser les sections d’un tableau

Ciblez les sections avec CSS :

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

Comportement des lecteurs d’écran

Avec une structure thead/tbody correcte, les lecteurs d’écran peuvent :

Annoncer les en-têtes de colonne comme contexte pour chaque cellule de données
Parcourir les différentes sections (zone d’en-tête et zone de données)
Indiquer aux utilisateurs le nombre de lignes et de colonnes

Plusieurs lignes dans thead

Un thead peut comporter plusieurs lignes pour les en-têtes complexes :

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

Vérification rapide

Où tfoot apparaît-il généralement dans le code source HTML par rapport au tableau affiché ?

Réponds-y dans la leçon interactive

Récapitulatif : thead, tbody et tfoot

Notions essentielles de la structure des tableaux :

<thead> — lignes d’en-tête (répétées à l’impression)
<tbody> — lignes de données (peut en contenir plusieurs)
<tfoot> — lignes de récapitulatif ou de totaux
Permet de cibler les sections avec CSS et d’améliorer la lecture accessible des tableaux
Écrivez toujours tbody explicitement, même si les navigateurs l’ajoutent automatiquement

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 40
Leçons: 159

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Structure thead, tbody et tfoot » est-elle gratuite ?

Oui — le texte complet de « Structure thead, tbody et tfoot » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Structure thead, tbody et tfoot » ?

Organisez les lignes d’un tableau en sections sémantiques d’en-tête, de corps et de pied de tableau. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Structure thead, tbody et tfoot » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

table, tr, td et th
Structure thead, tbody et tfoot
colspan et rowspan pour fusionner des cellules
Accessibilité des tableaux : scope, summary et caption

← Retour à HTML Academy