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

L'élément <tbody>, ainsi que les éléments <thead> et <tfoot>, fournissent des informations sémantiques qui sont utilisées pour l'affichage à l'écran, l'impression et l'accessibilité.

Cet élément inclut les attributs universels.

align Obsolète

Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :

left

Le contenu de la cellule est aligné à gauche de la cellule.

center

Le contenu de la cellule est centré horizontalement.

right

Le contenu de la cellule est aligné à droite de la cellule.

justify

Ajuste la largeur des espaces du contenu texte afin que le contenu de la cellule soit justifié.

char

Aligne le contenu texte de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs char et charoff.

Si cet attribut n'est pas renseigné, la valeur left est prise par défaut.

Cet attribut étant déprécié, on utilisera la propriété CSS text-align à la place.

Note : Le comportement de la propriété text-align équivalent à align="char" n'est pas implémenté par les navigateurs à l'heure actuelle. Voir le tableau de compatibilité des navigateurs text-align à propos de l'alignement basé sur les une valeur <string>.

bgcolor Obsolète

Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code hexadécimal à 6 chiffres RGB précédé d'un #. Un des mots-clés prédéfinis pour les couleurs peut également être utilisé.

Cet attribut étant déprécié, on utilisera la propriété CSS background-color à la place.

char Obsolète

Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut align ne vaut pas char, l'attribut est ignoré.

charoff Obsolète

Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut char à appliquer au contenu des cellules.

valign Obsolète

Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :

baseline

Aligne le texte sur la ligne la plus basse possible en utilisant la ligne de base des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur bottom.

bottom

Place le texte au plus bas de la cellule.

middle

Qui centre verticalement le texte dans la cellule.

top

Qui place le texte au plus haut de la cellule.

Cet attribut est déprécié, on utilisera la propriété CSS vertical-align à la place.

• Lorsque le tableau contient un élément <thead> (qui identifie les lignes d'en-tête), l'élément <tbody> doit apparaître après.
• Si on utilise <tbody>, il faudra alors que celui-ci contienne toutes les lignes qui ne sont pas des lignes d'en-tête ou de pied de tableau. Autrement dit, il n'est pas possible d'avoir des éléments <tr> qui soient des éléments fils directs de <table> si on utilise <tbody>.
• Lorsqu'il est imprimé, <tbody> représente le contenu qui, lorsqu'il est plus long qu'une page, sera différent sur chaque page. En revanche, <thead> et <tfoot> seront les mêmes ou seront semblables sur chacune des pages.
• Lorsqu'un tableau est présenté sur un écran qui n'est pas suffisamment grand pour l'afficher en entier, l'agent utilisateur pourra permettre de faire défiler séparément les contenus des éléments <thead>, <tfoot>, <tbody> et <caption> d'un même élément <table>.
• À la différence des éléments <thead>, <tfoot> et <caption>, on peut utiliser plusieurs éléments <tbody>, tant qu'ils sont consécutifs. Cela permet de répartir les lignes des grands tableaux en différentes sections, chacune pouvant être mise en forme distinctement.

Quelques exemples sont présentés ci-après afin d'illustrer l'utilisation de l'élément <tbody>. Pour plus d'exemples, voir la section Exemples de la page sur <table>.

Dans ce premier exemple simple, on crée un tableau contenant des informations sur un groupe d'étudiants, composé d'un élément <thead> et d'un élément <tbody> qui contient plusieurs lignes.

HTML

Voici le fragment de tableau HTML. On notera que toutes les cellules du tableau sont contenues dans un seul élément <tbody>.

<table>
  <thead>
    <tr>
      <th>Identifiant</th>
      <th>Nom</th>
      <th>Spécialité</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Martha Jones</td>
      <td>Informatique</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Victor Nim</td>
      <td>Littérature</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Alexandra Petrov</td>
      <td>Astrophysique</td>
    </tr>
  </tbody>
</table>

CSS

Le CSS permettant la mise en forme du tableau se décompose comme suit :

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}

Pour commencer, on définit le style général du tableau, l'épaisseur, le style et la couleur de la bordure extérieure avec border-collapse pour s'assurer que les lignes de bordure sont partagées entre les cellules adjacentes plutôt que chacune ait ses propres bordures avec un espace interstitiel. font est utilisé pour définir une police de caractères pour les textes du tableau.

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

On définit ensuite le style pour la majorité des cellules, tant celles qui ont des données mais aussi celles formées par <td> et <th>. On leur donne un contour gris d'une épaisseur de 1 pixel et le contenu des cellules est aligné à gauche avec text-align.

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

Enfin, on met en forme les cellules d'en-têtes, contenues dans le bloc <thead>. Celles-ci utilisent un arrière-plan (background-color) plus sombre, une police plus grande et une bordure basse plus épaisse et plus sombre.

Résultat

Voici le résultat obtenu :

On peut créer plusieurs sections au sein d'un tableau en utilisant plusieurs éléments <tbody>. Chacun peut avoir son propre en-tête et ses propres lignes. Toutefois, il ne peut y avoir qu'un seul élément <thead> par tableau ! Pour cette raison, il faudra utiliser un élément <tr> rempli d'éléments <th> afin de créer des en-têtes au sein de chaque <tbody>. Voyons cela.

Prenons l'exemple précédent et ajoutons plus d'étudiants à la liste. Cette fois, on met à jour le tableau afin de regrouper les étudiants par spécialité, avec des lignes d'en-tête pour chaque spécialité.

Résultat

Commençons par voir le résultat :

HTML

Le HTML modifié ressemble à ceci :

<table>
  <thead>
    <tr>
      <th>Identifiant</th>
      <th>Nom</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">Informatique</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Martha Jones</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Benjamin Pierce</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>James Kirk</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">Littérature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Victor Nim</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysique</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Alexandra Petrov</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Hiroko Toyota</td>
    </tr>
  </tbody>
</table>

On voit ici que chaque spécialité est placée dans un bloc <tbody> séparé, avec la première ligne qui contient un unique élément <th> avec un attribut colspan pour s'étendre sur toute la largeur du tableau. Cet en-tête indique le nom de la spécialité contenue dans le <tbody>.

Puis, chaque ligne suivante pour ce <tbody> se compose de deux cellules : la première contenant l'identifiant et la seconde contenant le nom.

CSS

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

Le CSS est inchangé pour la plupart. Une différence est apportée en ciblant les cellules d'en-tête d'un <tbody> (plutôt que celles d'un élément <thead>). On peut alors mettre en forme les en-têtes de chaque section.

tbody > tr > th {
  background-color: #dde;
  border-bottom: 1.5px solid #bbb;
  font-weight: normal;
}

• Les autres éléments HTML relatifs aux tableaux :
  • <caption>
  • <col>
  • <colgroup>
  • <table>
  • <td>
  • <tfoot>
  • <th>
  • <thead>
  • <tr>
• Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément <tbody> :
  • La pseudo-classe :nth-child qui permet de paramétrer l'alignement des cellules d'une colonne
  • La propriété text-align qui permet d'aligner le contenu des cellules par rapport à un même caractère (par exemple « . »)