<tbody> : l'élément de corps d'un tableau

Exemple interactif

<table>
  <caption>
    Budget du conseil (en livres sterling) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Articles</th>
      <th scope="col">Dépenses</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Beignets</th>
      <td>3 000</td>
    </tr>
    <tr>
      <th scope="row">Fournitures de bureau</th>
      <td>18 000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>21 000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

Attributs

Cet élément inclut les attributs universels.

Attributs obsolètes

align Obsolète

Définit l'alignement horizontal de chaque cellule du corps. Les valeurs énumérées possibles sont left, center, right, justify et char. Lorsque cela est pris en charge, la valeur char aligne le contenu textuel sur le caractère défini dans l'attribut char et sur le décalage défini par l'attribut charoff. Utilisez la propriété CSS text-align à la place, car cet attribut est déprécié.

bgcolor Obsolète

Définit la couleur d'arrière-plan de chaque cellule du corps. La valeur est une couleur HTML ; soit un code RGB hexadécimal à 6 chiffres précédé d'un #, soit un mot-clé de couleur. Les autres valeurs CSS <color> ne sont pas prises en charge. Utilisez la propriété CSS background-color à la place, car cet attribut est déprécié.

char Obsolète

Définit l'alignement du contenu sur un caractère dans chaque cellule du corps. Les valeurs typiques incluent un point (.) pour aligner des nombres ou des valeurs monétaires. Si align n'est pas défini sur char, cet attribut est ignoré.

charoff Obsolète

Définit le nombre de caractères de décalage du contenu de la cellule du corps par rapport au caractère d'alignement défini par l'attribut char.

valign Obsolète

Définit l'alignement vertical de chaque cellule du corps. Les valeurs énumérées possibles sont baseline, bottom, middle et top. Utilisez la propriété CSS vertical-align à la place, car cet attribut est déprécié.

Notes d'utilisation

• Le <tbody> est placé après tout élément <caption>, <colgroup> et <thead>.
• Si des éléments <tr> sont définis comme enfants directs de <table> (voir « omission de balise » dans le résumé technique pour une description des cas où cela est valide), alors le balisage généré par le navigateur inclura un élément <tbody> qui les encapsule. En conséquence, les sélecteurs CSS comme table > tr ne sélectionneront pas ces éléments. Voir aussi l'exemple Sans corps explicite.
• Il est permis d'utiliser plusieurs <tbody> par tableau tant qu'ils sont tous consécutifs. Cela permet de diviser les lignes (éléments <tr>) des grands tableaux en sections, chacune pouvant être mise en forme séparément si besoin. Si les éléments ne sont pas balisés comme consécutifs, les navigateurs corrigeront cette erreur d'auteur, en s'assurant que tout élément <thead> et <tfoot> soit respectivement rendu en premier et en dernier dans le tableau.
• Avec les éléments associés <thead> et <tfoot>, l'élément <tbody> fournit des informations sémantiques utiles et peut être utilisé lors du rendu à l'écran ou à l'impression. Définir de tels groupes de contenu de tableau fournit aussi des informations contextuelles précieuses pour les technologies d'assistance, y compris les lecteurs d'écran et les moteurs de recherche.
• Lors de l'impression d'un document, dans le cas d'un tableau multipage, les éléments <thead> et <tfoot> définissent généralement des informations qui restent identiques — ou du moins très similaires — sur chaque page, tandis que le contenu de l'élément <tbody> diffère généralement d'une page à l'autre.
• Lorsqu'un tableau est présenté dans un contexte d'écran (comme une fenêtre) qui n'est pas assez grand pour afficher le tableau en entier, le agent utilisateur peut permettre à l'utilisateur·ice de faire défiler séparément le contenu des blocs <thead>, <tbody>, <tfoot> et <caption> pour un même parent <table>.

Exemples

Voir <table> pour un exemple complet de tableau présentant les standards courants et les bonnes pratiques.

Sans définir de corps

Cet exemple montre que le navigateur encapsule automatiquement les éléments <tr> dans un élément <tbody> si les lignes ne sont pas imbriquées dans un élément de regroupement de tableau (<tbody>, <tfoot> ou <thead>) et sont, comme dans cet exemple, des enfants directs de l'élément <table>.

HTML

Ici, un tableau très simple est créé avec quelques lignes de tableau (éléments <tr>) contenant des données (éléments <td>) sur des étudiant·e·s.

<table>
  <tr>
    <td>3741255</td>
    <td>Martha Jones</td>
    <td>Informatique</td>
    <td>240</td>
  </tr>
  <tr>
    <td>3971244</td>
    <td>Victor Nim</td>
    <td>Littérature</td>
    <td>220</td>
  </tr>
  <tr>
    <td>4100332</td>
    <td>Alexandra Petrov</td>
    <td>Astrophysique</td>
    <td>260</td>
  </tr>
</table>

CSS

Notez le CSS dans l'exemple, où une background-color est définie pour l'élément <tbody> et où tbody est utilisé dans un sélecteur CSS supplémentaire. Il est également possible d'utiliser les outils de développement du navigateur pour vérifier la présence de l'élément <tbody> dans le DOM.

tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  width: 60px;
  text-align: center;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

Résultat

Structure de base du corps

Cet exemple étend et améliore le tableau de base du précédent exemple.

HTML

Nous introduisons une tête de tableau (élément <thead>) et utilisons explicitement un élément <tbody> pour structurer le tableau en sections sémantiques. La tête de tableau contient les en-têtes de colonnes (éléments <th>). L'élément <tbody> représente la section du corps du tableau, qui contient plusieurs lignes (éléments <tr>) avec les données principales du tableau, c'est-à-dire les données de chaque étudiant·e.

L'utilisation de tels groupes de contenu de tableau et d'une structuration sémantique n'est pas seulement utile pour la présentation visuelle (via la mise en forme CSS) et l'information contextuelle pour les technologies d'assistance ; de plus, l'utilisation explicite de l'élément <tbody> aide le navigateur à créer la structure de tableau souhaitée, évitant ainsi des résultats indésirables.

<table>
  <thead>
    <tr>
      <th>Identifiant de l'étudiant</th>
      <th>Nom</th>
      <th>Spécialité</th>
      <th>Crédits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Informatique</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Littérature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysique</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

Le CSS est presque inchangé par rapport au précédent exemple, à l'exception de quelques styles de base pour mettre en valeur l'en-tête du tableau afin que les en-têtes de colonnes se distinguent des données du corps du tableau. Comme dans l'exemple ci-dessus, le sélecteur de type tbody est utilisé pour mettre en forme les cellules du corps.

tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

Result

Plusieurs corps de tableau

Cet exemple étend et améliore encore le tableau de l'exemple ci-dessus en introduisant plusieurs sections de corps.

L'utilisation de plusieurs éléments <tbody> permet de créer des regroupements de lignes dans un tableau. Chaque corps de tableau peut potentiellement avoir sa propre ou ses propres lignes d'en-tête ; cependant, il ne peut y avoir qu'un seul élément <thead> par tableau ! Pour cette raison, des <tr> avec des éléments <th> peuvent être utilisés pour créer des en-têtes dans chaque <tbody>.

HTML

En s'appuyant sur le tableau du précédent exemple de base, on ajoute plus d'étudiant·e·s et, au lieu d'indiquer la spécialité de chaque étudiant·e sur chaque ligne, les étudiant·e·s sont regroupé·e·s par spécialité. Notez que chaque spécialité est incluse dans son propre bloc <tbody>, la première ligne (élément <tr>) servant d'en-tête du bloc, affichant le nom de la spécialité dans un élément <th> qui utilise l'attribut colspan pour étendre l'en-tête sur les trois colonnes du tableau. Chaque ligne restante dans chaque <tbody> de spécialité représente un·e étudiant·e.

<table>
  <thead>
    <tr>
      <th>Identifiant de l'étudiant</th>
      <th>Nom</th>
      <th>Crédits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3">Informatique</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>240</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
      <td>200</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
      <td>230</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Littérature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>220</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Astrophysique</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>260</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
      <td>240</td>
    </tr>
  </tbody>
</table>

CSS

La majeure partie du CSS est inchangée. Cependant, un style un peu plus subtil est ajouté pour les cellules d'en-tête contenues directement dans un <tbody> (par opposition à celles qui se trouvent dans le <thead>). Cela est utilisé pour les en-têtes indiquant la spécialité correspondante de chaque section du tableau.

tbody > tr > th {
  border-top: 2px solid rgb(160 160 160);
  border-bottom: 1px solid rgb(140 140 140);
  background-color: #e4f0f5;
  font-weight: normal;
}

tbody {
  background-color: whitesmoke;
}

thead {
  background-color: #2c5e77;
  color: white;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 6px 8px;
  text-align: left;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Apprendre : bases des tableaux HTML
• Autres éléments liés aux tableaux : <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>
• La propriété CSS background-color pour définir la couleur d'arrière-plan de chaque cellule du corps
• La propriété CSS border pour contrôler les bordures des cellules du corps
• La propriété CSS text-align pour aligner horizontalement le contenu de chaque cellule du corps
• La propriété CSS vertical-align pour aligner verticalement le contenu de chaque cellule du corps