La balise <thead> en HTML : définition et exemples

Introduction à la balise <thead>

Lorsque vous créez des tableaux en HTML, la structure et l'organisation des données sont essentielles pour garantir une bonne lisibilité et une accessibilité optimale. La balise <thead> joue un rôle fondamental dans cette organisation en permettant de définir clairement l'en-tête de vos tableaux.

Que vous développiez une application web pour afficher des données utilisateurs, un tableau de bord administratif ou simplement une liste de produits, maîtriser la balise <thead> vous permettra de créer des tableaux professionnels et sémantiquement corrects. Si vous souhaitez approfondir vos connaissances en HTML et découvrir toutes les subtilités des tableaux, notre formation complète sur HTML vous guidera pas à pas.

Définition et syntaxe de <thead>

Qu'est-ce que la balise <thead> ?

La balise <thead> (table header) est un élément HTML qui définit un groupe de lignes constituant l'en-tête d'un tableau. Elle contient généralement les titres des colonnes et permet aux navigateurs, aux lecteurs d'écran et aux moteurs de recherche de comprendre la structure sémantique de votre tableau.

Contrairement à une simple ligne de tableau avec des cellules <th>, l'utilisation de <thead> apporte une signification sémantique supplémentaire qui améliore considérablement l'accessibilité et la maintenabilité de votre code.

Syntaxe de base

Voici la syntaxe fondamentale pour utiliser la balise <thead> :

<table>
  <thead>
    <tr>
      <th>Titre colonne 1</th>
      <th>Titre colonne 2</th>
      <th>Titre colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Donnée 1</td>
      <td>Donnée 2</td>
      <td>Donnée 3</td>
    </tr>
  </tbody>
</table>

Position dans le tableau

La balise <thead> doit respecter un ordre précis dans la structure du tableau. Elle doit apparaître après l'élément <caption> (s'il existe) et avant les éléments <tbody>, <tfoot> ou directement avant les lignes <tr> si vous n'utilisez pas ces éléments de regroupement.

<table>
  <caption>Liste des formations Believemy</caption>
  <thead>
    <!-- En-tête du tableau -->
  </thead>
  <tbody>
    <!-- Corps du tableau -->
  </tbody>
  <tfoot>
    <!-- Pied du tableau -->
  </tfoot>
</table>

Attributs disponibles

La balise <thead> accepte tous les attributs globaux HTML. Voici les plus couramment utilisés :

Exemples pratiques d'utilisation

Exemple simple : tableau de données utilisateurs

Commençons par un exemple concret que vous pourriez rencontrer dans une application Believemy pour afficher la liste des apprenants :

<table>
  <thead>
    <tr>
      <th scope="col">Nom</th>
      <th scope="col">Email</th>
      <th scope="col">Formation suivie</th>
      <th scope="col">Progression</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Marie Dupont</td>
      <td>marie@example.com</td>
      <td>HTML/CSS</td>
      <td>75%</td>
    </tr>
    <tr>
      <td>Pierre Martin</td>
      <td>pierre@example.com</td>
      <td>JavaScript</td>
      <td>45%</td>
    </tr>
  </tbody>
</table>

Dans cet exemple, nous utilisons l'attribut scope="col" sur chaque cellule d'en-tête <th>. Cet attribut indique que l'en-tête s'applique à toute la colonne, ce qui est essentiel pour l'accessibilité.

Exemple avancé : en-tête multi-lignes

La balise <thead> peut contenir plusieurs lignes, ce qui est utile pour créer des en-têtes hiérarchiques :

<table>
  <thead>
    <tr>
      <th rowspan="2">Apprenant</th>
      <th colspan="2">Formations techniques</th>
      <th colspan="2">Formations créatives</th>
    </tr>
    <tr>
      <th>HTML/CSS</th>
      <th>JavaScript</th>
      <th>Design UI</th>
      <th>Photoshop</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sophie Bernard</td>
      <td>Terminée</td>
      <td>En cours</td>
      <td>Non commencée</td>
      <td>Terminée</td>
    </tr>
  </tbody>
</table>

Les attributs rowspan et colspan permettent de fusionner des cellules pour créer des regroupements logiques dans l'en-tête.

Exemple avec stylisation CSS

Voici comment styliser efficacement un en-tête de tableau avec CSS :

<style>
  .believemy-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }
  
  .believemy-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }
  
  .believemy-table thead th {
    padding: 15px 20px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 3px solid #5a67d8;
  }
  
  .believemy-table thead th:first-child {
    border-radius: 8px 0 0 0;
  }
  
  .believemy-table thead th:last-child {
    border-radius: 0 8px 0 0;
  }
</style>

<table class="believemy-table">
  <thead>
    <tr>
      <th>Formation</th>
      <th>Durée</th>
      <th>Niveau</th>
      <th>Note moyenne</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML & CSS</td>
      <td>12 heures</td>
      <td>Débutant</td>
      <td>4.8/5</td>
    </tr>
  </tbody>
</table>

Avantages de l'utilisation de <thead>

Amélioration de l'accessibilité

L'un des avantages majeurs de la balise <thead> est son impact positif sur l'accessibilité. Les lecteurs d'écran utilisent cette structure sémantique pour aider les utilisateurs malvoyants à naviguer dans les tableaux. Lorsqu'un utilisateur se déplace dans les cellules du tableau, le lecteur d'écran peut répéter les en-têtes correspondants pour contextualiser chaque donnée.

Impression et pagination

Lors de l'impression d'un tableau qui s'étend sur plusieurs pages, les navigateurs peuvent automatiquement répéter l'en-tête défini dans <thead> en haut de chaque nouvelle page. Cette fonctionnalité améliore considérablement la lisibilité des documents imprimés.

/* Pour garantir la répétition de l'en-tête à l'impression */
thead {
  display: table-header-group;
}

@media print {
  thead {
    display: table-header-group;
  }
}

Défilement avec en-tête fixe

La structure <thead> facilite la création de tableaux avec un en-tête fixe lors du défilement vertical :

.table-container {
  max-height: 400px;
  overflow-y: auto;
}

.table-container thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Cette technique est particulièrement utile pour les tableaux de données volumineux où l'utilisateur doit pouvoir identifier les colonnes à tout moment.

Bonnes pratiques et recommandations

Toujours associer <thead> avec <tbody>

Lorsque vous utilisez <thead>, il est fortement recommandé d'utiliser également <tbody> pour encapsuler le corps de votre tableau. Cette cohérence structurelle rend votre code plus lisible et plus prévisible.

<!-- ✅ Bonne pratique -->
<table>
  <thead>
    <tr><th>En-tête</th></tr>
  </thead>
  <tbody>
    <tr><td>Données</td></tr>
  </tbody>
</table>

<!-- ❌ À éviter -->
<table>
  <thead>
    <tr><th>En-tête</th></tr>
  </thead>
  <tr><td>Données</td></tr>
</table>

Utiliser les attributs scope pour l'accessibilité

Pour une accessibilité optimale, utilisez l'attribut scope sur vos cellules d'en-tête :

<thead>
  <tr>
    <th scope="col">Nom</th>
    <th scope="col">Prénom</th>
    <th scope="col">Email</th>
  </tr>
</thead>

Les valeurs possibles pour scope sont :

• col : l'en-tête s'applique à la colonne
• row : l'en-tête s'applique à la ligne
• colgroup : l'en-tête s'applique à un groupe de colonnes
• rowgroup : l'en-tête s'applique à un groupe de lignes

Éviter les tableaux pour la mise en page

N'utilisez jamais <thead> ou les tableaux en général pour la mise en page. Les tableaux doivent être réservés exclusivement aux données tabulaires. Pour la mise en page, privilégiez les techniques CSS modernes comme Flexbox ou Grid.

Erreurs courantes à éviter

Oublier les balises <tr>

Une erreur fréquente consiste à placer directement les cellules <th> dans <thead> sans les encapsuler dans une ligne <tr> :

<!-- ❌ Incorrect -->
<thead>
  <th>Colonne 1</th>
  <th>Colonne 2</th>
</thead>

<!-- ✅ Correct -->
<thead>
  <tr>
    <th>Colonne 1</th>
    <th>Colonne 2</th>
  </tr>
</thead>

Utiliser <td> au lieu de <th> dans l'en-tête

Dans un <thead>, utilisez toujours <th> (table header cell) et non <td> (table data cell). Les cellules <th> ont une signification sémantique d'en-tête et sont stylisées différemment par défaut (texte en gras et centré).

<!-- ❌ À éviter -->
<thead>
  <tr>
    <td>Titre</td>
  </tr>
</thead>

<!-- ✅ Correct -->
<thead>
  <tr>
    <th>Titre</th>
  </tr>
</thead>

Placer <thead> au mauvais endroit

La balise <thead> doit toujours être placée avant <tbody> et <tfoot>. Un mauvais ordre peut entraîner des problèmes d'affichage et d'accessibilité.

Compatibilité navigateurs

La balise <thead> bénéficie d'une excellente compatibilité avec tous les navigateurs modernes et anciens :

Vous pouvez utiliser <thead> en toute confiance dans tous vos projets sans vous soucier de la compatibilité.

Questions fréquentes sur <thead>

Non, la balise <thead> n'est pas techniquement obligatoire. Un tableau peut fonctionner sans elle. Cependant, son utilisation est fortement recommandée pour des raisons d'accessibilité, de sémantique et de maintenabilité du code. Elle permet aux technologies d'assistance de mieux comprendre la structure de votre tableau et offre des avantages pratiques comme la répétition automatique de l'en-tête à l'impression.

Oui, absolument ! La balise <thead> peut contenir plusieurs éléments <tr>. C'est particulièrement utile pour créer des en-têtes hiérarchiques avec des regroupements de colonnes utilisant les attributs colspan et rowspan.

La balise <th> représente une cellule d'en-tête individuelle, tandis que <thead> est un conteneur qui regroupe une ou plusieurs lignes formant l'en-tête complet du tableau. Utilisez <th> pour chaque titre de colonne ou de ligne, et <thead> pour encapsuler la section d'en-tête globale de votre tableau.

Pour maîtriser HTML et CSS, y compris la création de tableaux accessibles et sémantiquement corrects, notre formation dédiée sur Believemy vous accompagnera de manière progressive. Vous y découvrirez toutes les balises essentielles, les bonnes pratiques et de nombreux exercices pratiques pour consolider vos acquis.