Qu'est-ce que la balise <tbody> en HTML ?

Introduction à la balise <tbody>

La balise <tbody> est un élément fondamental dans la création de tableaux HTML bien structurés. Elle permet de définir le corps principal d'un tableau, c'est-à-dire la zone qui contient les données effectives, par opposition à l'en-tête et au pied de tableau.

Lorsque vous construisez des tableaux complexes pour afficher des informations comme des listes d'apprenants, des catalogues de formations ou des statistiques, la balise <tbody> devient indispensable pour organiser votre code de manière sémantique et accessible. Si vous souhaitez maîtriser la création de tableaux professionnels et bien d'autres éléments HTML, notre formation pour maîtriser HTML vous guidera pas à pas dans cet apprentissage.

Définition et syntaxe de <tbody>

Syntaxe de base

La balise <tbody> s'utilise à l'intérieur d'un élément <table> et encadre les lignes de données du tableau.

Voici la structure fondamentale :

<table>
  <thead>
    <tr>
      <th>En-tête 1</th>
      <th>En-tête 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Donnée 1</td>
      <td>Donnée 2</td>
    </tr>
    <tr>
      <td>Donnée 3</td>
      <td>Donnée 4</td>
    </tr>
  </tbody>
</table>

La balise <tbody> est une balise conteneur qui nécessite une balise ouvrante et une balise fermante. Elle ne possède aucun attribut spécifique en HTML5, mais accepte les attributs globaux comme class, id ou style.

Caractéristiques principales

Voici les caractéristiques essentielles de la balise <tbody> :

• Élément de regroupement : elle regroupe une ou plusieurs lignes <tr> qui constituent le corps du tableau
• Balise optionnelle mais recommandée : les navigateurs l'ajoutent implicitement si elle est absente
• Position dans le tableau : elle doit apparaître après <thead> et avant <tfoot> si ces éléments sont présents
• Multiplicité : un tableau peut contenir plusieurs éléments <tbody> pour regrouper différentes sections de données
• Élément de bloc : elle génère un contexte de formatage en bloc dans le tableau

Position dans la hiérarchie HTML

Pour bien comprendre où se place <tbody>, examinons la structure complète d'un tableau sémantique :

<table>
  <caption>Liste des formations Believemy</caption>
  <thead>
    <!-- En-têtes de colonnes -->
  </thead>
  <tbody>
    <!-- Données principales -->
  </tbody>
  <tfoot>
    <!-- Pied de tableau (totaux, résumés) -->
  </tfoot>
</table>

Cette structure tripartite (thead, tbody, tfoot) permet aux navigateurs et aux technologies d'assistance de mieux interpréter la nature des données présentées.

Exemples pratiques d'utilisation

Exemple simple : tableau de données

Commençons par un exemple concret de tableau listant des formations :

<table>
  <thead>
    <tr>
      <th>Formation</th>
      <th>Durée</th>
      <th>Niveau</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML Fondamentaux</td>
      <td>10 heures</td>
      <td>Débutant</td>
    </tr>
    <tr>
      <td>CSS Avancé</td>
      <td>15 heures</td>
      <td>Intermédiaire</td>
    </tr>
    <tr>
      <td>JavaScript Moderne</td>
      <td>25 heures</td>
      <td>Avancé</td>
    </tr>
  </tbody>
</table>

Dans cet exemple, le <tbody> contient trois lignes de données distinctes des en-têtes. Cette séparation claire facilite la lecture du code et permet d'appliquer des styles CSS différents à chaque section.

Exemple avancé : multiples tbody

Une fonctionnalité méconnue mais très puissante est la possibilité d'utiliser plusieurs éléments <tbody> dans un même tableau pour créer des groupes logiques de données :

<table>
  <thead>
    <tr>
      <th>Apprenant</th>
      <th>Formation</th>
      <th>Progression</th>
    </tr>
  </thead>
  
  <tbody class="groupe-debutants">
    <tr class="groupe-titre">
      <td colspan="3"><strong>Niveau Débutant</strong></td>
    </tr>
    <tr>
      <td>Marie Dupont</td>
      <td>HTML Bases</td>
      <td>75%</td>
    </tr>
    <tr>
      <td>Pierre Martin</td>
      <td>CSS Introduction</td>
      <td>60%</td>
    </tr>
  </tbody>
  
  <tbody class="groupe-avances">
    <tr class="groupe-titre">
      <td colspan="3"><strong>Niveau Avancé</strong></td>
    </tr>
    <tr>
      <td>Sophie Bernard</td>
      <td>JavaScript Pro</td>
      <td>90%</td>
    </tr>
  </tbody>
</table>

Cette technique est particulièrement utile pour les tableaux de rapports ou les données catégorisées, car elle permet d'appliquer des styles distincts à chaque groupe et facilite la manipulation JavaScript.

Stylisation avec CSS

L'un des avantages majeurs d'utiliser explicitement <tbody> est la possibilité de cibler facilement cette section en CSS. Voici un exemple de stylisation :

/* Style général du tableau */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

/* Style des en-têtes */
thead {
  background-color: #2c3e50;
  color: white;
}

thead th {
  padding: 12px 15px;
  text-align: left;
}

/* Style du corps du tableau */
tbody tr {
  border-bottom: 1px solid #dddddd;
}

tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

tbody tr:hover {
  background-color: #e8f4f8;
  cursor: pointer;
}

tbody td {
  padding: 12px 15px;
}

Ce code CSS crée un tableau élégant avec une alternance de couleurs sur les lignes (effet zébré) et un effet de survol. Le sélecteur tbody tr garantit que ces styles ne s'appliquent qu'aux lignes de données, pas aux en-têtes.

Bonnes pratiques d'utilisation

Toujours structurer vos tableaux

Même si la balise <tbody> est techniquement optionnelle, nous vous recommandons fortement de toujours l'inclure explicitement dans vos tableaux pour plusieurs raisons :

• Clarté du code : la structure devient immédiatement lisible pour vous et vos collègues
• Maintenance facilitée : les modifications sont plus simples à effectuer
• CSS plus prévisible : les sélecteurs CSS ciblent exactement ce que vous souhaitez
• JavaScript plus fiable : la manipulation du DOM est plus cohérente

Accessibilité et sémantique

La balise <tbody> contribue à l'accessibilité de vos tableaux. Les lecteurs d'écran utilisent cette information pour aider les utilisateurs à naviguer efficacement dans les données. Combinée avec les balises appropriées, elle permet une expérience inclusive.

Pour une accessibilité optimale, associez toujours <tbody> avec :

• Un élément <caption> décrivant le contenu du tableau
• Des balises <th> avec l'attribut scope approprié
• L'attribut aria-describedby si des explications supplémentaires sont nécessaires

<table aria-describedby="description-tableau">
  <caption>Progression des apprenants Believemy</caption>
  <thead>
    <tr>
      <th scope="col">Nom</th>
      <th scope="col">Formation</th>
      <th scope="col">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jean Believemy</td>
      <td>HTML Complet</td>
      <td>95%</td>
    </tr>
  </tbody>
</table>
<p id="description-tableau">Ce tableau affiche la progression en temps réel.</p>

Utilisation avec les tableaux responsives

Dans le cadre du design responsive, <tbody> peut être ciblé pour modifier l'affichage sur les petits écrans. Une technique courante consiste à transformer les lignes en cartes empilées :

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tbody tr {
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
  }
  
  tbody td {
    border: none;
    position: relative;
    padding-left: 50%;
  }
  
  tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}

Cette approche nécessite d'ajouter un attribut data-label à chaque cellule pour afficher le nom de la colonne sur mobile.

Erreurs fréquentes à éviter

Oublier la structure parent-enfant

Une erreur courante est de placer des éléments non autorisés directement dans <tbody>. Seuls les éléments <tr> (lignes de tableau) peuvent être enfants directs de <tbody> :

<!-- ❌ INCORRECT -->
<tbody>
  <td>Donnée</td>  <!-- td directement dans tbody -->
  <p>Texte</p>     <!-- p non autorisé -->
</tbody>

<!-- ✅ CORRECT -->
<tbody>
  <tr>
    <td>Donnée</td>
  </tr>
</tbody>

Mauvais ordre des sections

L'ordre des éléments dans un tableau doit respecter une séquence précise. Voici l'ordre correct :

1. <caption> (optionnel, mais doit être premier si présent)
2. <colgroup> (optionnel)
3. <thead> (optionnel)
4. <tbody> (un ou plusieurs)
5. <tfoot> (optionnel)

Un avantage notable de cette séparation est que lors de l'impression d'un long tableau sur plusieurs pages, les navigateurs peuvent répéter automatiquement <thead> et <tfoot> sur chaque page, tandis que <tbody> se divise naturellement.

Comportement à l'impression

Lorsqu'un tableau s'étend sur plusieurs pages imprimées, les navigateurs modernes gèrent intelligemment les sections :

• <thead> se répète en haut de chaque page
• <tfoot> peut se répéter en bas de chaque page (selon le navigateur)
• <tbody> est divisé naturellement entre les pages

Cette fonctionnalité rend les rapports imprimés beaucoup plus lisibles sans effort supplémentaire de votre part.

Compatibilité navigateurs

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

Vous pouvez utiliser <tbody> en toute confiance sans vous soucier de la compatibilité, car cet élément est supporté depuis les premières versions des navigateurs web.

Questions fréquentes sur <tbody>

Non, la balise <tbody> n'est pas obligatoire. Si vous ne l'écrivez pas, les navigateurs l'ajoutent automatiquement dans le DOM autour de vos lignes <tr> qui ne sont pas dans un <thead> ou <tfoot>. Cependant, nous vous recommandons fortement de toujours l'écrire explicitement pour améliorer la lisibilité de votre code et éviter les surprises lors de la manipulation JavaScript ou du ciblage CSS.

Oui, absolument ! C'est même une fonctionnalité très utile pour regrouper logiquement différentes sections de données. Par exemple, vous pourriez avoir un <tbody> pour chaque catégorie de produits ou chaque département d'une entreprise. Chaque <tbody> peut avoir sa propre classe CSS pour un style distinct.

La balise <div> n'est pas autorisée à l'intérieur d'un tableau HTML (sauf dans une cellule <td> ou <th>). Le <tbody> est l'élément sémantique prévu pour regrouper les lignes de données. Utiliser un <div> à la place casserait la structure du tableau et pourrait causer des problèmes d'affichage et d'accessibilité.