W3docs
fr
Se connecter

Balise HTML <tbody>

La balise <tbody> définit le contenu du corps d'un tableau HTML. Elle s'utilise avec les éléments <thead> et <tfoot>. Voir des exemples.

La balise <tbody> définit le contenu du corps (un ensemble de lignes) d'un tableau HTML, créant un bloc sémantique distinct à l'intérieur de celui-ci. Elle s'utilise conjointement avec les balises <thead> et <tfoot>, qui spécifient respectivement l'en-tête et le pied de page du tableau. Ensemble, ces trois éléments divisent un tableau en tête, corps et pied — rendant le balisage plus lisible, plus facile à styliser et accessible aux technologies d'assistance.

La balise <tbody> doit être utilisée comme enfant de l'élément <table>, après les éléments <caption> et <colgroup> (le cas échéant) et après l'élément <thead>. En HTML5, l'élément <tfoot> peut se placer avant ou après l'élément <tbody> — les deux sont valides, et <tfoot> s'affiche toujours en bas du tableau quelle que soit sa position dans le code source.

Pourquoi <tbody> est important

Même si vous n'écrivez jamais de balise <tbody>, le navigateur en crée une pour vous. Lorsque vous placez des lignes <tr> directement dans un <table>, l'analyseur les enveloppe automatiquement dans un <tbody> implicite. Cela a des conséquences pratiques :

  • Sélecteurs CSS. En raison du <tbody> implicite, un sélecteur descendant comme table > tbody > tr correspond aux lignes même si vous n'avez pas écrit la balise, tandis que table > tr ne correspond à rien. Le connaître évite les bugs déconcertants du type « mon sélecteur ne fonctionne pas ».
  • Regroupement de lignes. Un tableau peut contenir plusieurs éléments <tbody>, vous permettant de diviser un grand tableau en sections logiques (par exemple, par année ou par catégorie) que vous pouvez styliser et faire défiler indépendamment.
  • Scripts DOM. Chaque <table> expose une collection tBodies en JavaScript (table.tBodies[0]), vous donnant un accès direct à chaque groupe de corps sans parcourir les nœuds enfants.
  • Impression. Lorsqu'un long tableau s'étend sur plusieurs pages imprimées, les navigateurs répètent les éléments <thead> et <tfoot> sur chaque page tandis que le contenu du <tbody> s'étale de page en page.
Astuce

Les éléments <thead>, <tbody> et <tfoot> n'affectent pas la mise en page du tableau par défaut. Utilisez les propriétés CSS pour personnaliser l'apparence du tableau.

Lors de l'impression d'un document, les éléments <thead> et <tfoot> définissent les informations pouvant être identiques ou très similaires sur chaque page d'un tableau multi-pages, tandis que le contenu de la balise <tbody> variera de page en page.

En cas d'utilisation de <tbody>, vous ne pouvez pas avoir d'éléments <tr> (lignes de tableau) qui sont des enfants de l'élément <table> mais qui ne sont pas inclus dans le <tbody>. Si vous utilisez des lignes qui ne sont ni des en-têtes ni des pieds de page, elles doivent se trouver à l'intérieur de l'élément <tbody>.

Plusieurs éléments <tbody> peuvent être utilisés pour chaque tableau, à condition qu'ils soient tous successifs. Cela permettra de séparer les lignes des grands tableaux en sections et vous pourrez formater chacune d'elles séparément.

Syntaxe

La balise <tbody> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<tbody>) et fermante (</tbody>).

Balise HTML <tbody>

<table>
  <thead> ... </thead>
  <tfoot> ... </tfoot>
  <tbody>
    <tr>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Exemple de la balise HTML <tbody> :

Balise HTML <tbody>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <thead style="background-color:#1c87c9; color:#fff;">
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot style="background-color:grey;">
        <!-- <tfoot> is placed after <thead>, but is shown on the bottom of the table. -->
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody style="background-color:lightgrey;">
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Essayez vous-même »

Résultat

exemple tbody

Exemple de la balise HTML <tbody> avec les balises <thead> et <tfoot> :

Balise HTML <tbody>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 60%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #8ebf42;
        color: #fff;
      }
      tbody {
        background-color: #f3ebeb;
      }
      tfoot {
        background-color: #ccc7c7;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>1500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>2500</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
Essayez vous-même »

Exemple avec plusieurs éléments <tbody>

Vous pouvez utiliser plusieurs éléments <tbody> dans un seul tableau pour regrouper les lignes en sections distinctes. Ici, chaque trimestre forme son propre groupe de corps, et chaque groupe obtient sa propre couleur de fond :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 60%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
        text-align: left;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
      tbody:nth-of-type(odd) {
        background-color: #f3ebeb;
      }
      tbody:nth-of-type(even) {
        background-color: #e3f0fb;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>March</td>
          <td>750</td>
        </tr>
        <tr>
          <td>April</td>
          <td>1200</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Accessibilité

Les éléments <tbody>, <thead> et <tfoot> aident les lecteurs d'écran à restituer la structure d'un tableau. Pour un tableau le plus accessible possible, associez-les à des cellules d'en-tête utilisant l'attribut scope, afin que les technologies d'assistance puissent annoncer à quelle en-tête appartient une cellule de données :

<table>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>500</td>
    </tr>
  </tbody>
</table>

Utilisez scope="col" pour les en-têtes de colonnes (généralement dans <thead>) et scope="row" pour les en-têtes de lignes dans le corps du tableau.

Attributs

AttributValeursDescription
alignright left center justify charSpécifie l'alignement du contenu à l'intérieur de l'élément <tbody>. Non pris en charge en HTML5.
bgcolorbgcolorDéfinit la couleur de fond des lignes à l'intérieur de l'élément <tbody>. Non pris en charge en HTML5.
charcharacterSpécifie l'alignement du contenu de l'élément <tbody> sur un caractère. Utilisé uniquement lorsque l'attribut align="char". Non pris en charge en HTML5.
charoffnumberSpécifie le nombre de caractères dont le contenu de l'élément <tbody> sera décalé par rapport au caractère spécifié par l'attribut char. Utilisé uniquement lorsque l'attribut align="char". Non pris en charge en HTML5.
valigntop bottom middle baselineSpécifie l'alignement vertical du contenu à l'intérieur de l'élément <tbody>. Non pris en charge en HTML5.

La balise <tbody> prend également en charge les attributs globaux et les attributs d'événement.

Remplacements CSS pour les attributs obsolètes

Les attributs de présentation ci-dessus sont obsolètes en HTML5. Utilisez CSS à la place :

Ancien attributCSS équivalent
align="center"text-align: center;
valign="top"vertical-align: top;
bgcolor="#eee"background-color: #eee;

Comment styliser une balise HTML <tbody>

Ciblez directement l'élément <tbody> dans votre feuille de style pour lui donner sa propre couleur de fond, ses bordures et l'alignement de ses cellules :

tbody {
  background-color: #f3ebeb;
  border: 2px solid #1c87c9;
}

tbody td {
  text-align: center;
  vertical-align: top;
}

/* Zebra-stripe the body rows */
tbody tr:nth-of-type(even) {
  background-color: #e3f0fb;
}

Consultez la mise en forme des tableaux avec CSS pour plus de techniques.

Exercice

Pratique
Que fait la balise HTML tbody ?
Que fait la balise HTML tbody ?
Was this page helpful?