L'élémentHTML<tbody> permet de regrouper une ou plusieurs lignes du tableau (éléments<tr>), indiquant qu'elles constituent le corps (principal) des données 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 lesattributs universels.

Attributs obsolètes

alignObsolète

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

bgcolorObsolète

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

charObsolè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. Sialign n'est pas défini surchar, cet attribut est ignoré.

charoffObsolè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'attributchar.

valignObsolète

Définit l'alignement vertical de chaque cellule du corps. Les valeursénumérées possibles sontbaseline,bottom,middle ettop. Utilisez la propriété CSSvertical-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 leré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 commetable > tr ne sélectionneront pas ces éléments. Voir aussi l'exempleSans 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 informationssé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, leagent 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ù unebackground-color est définie pour l'élément<tbody> et oùtbody est utilisé dans unsélecteur CSS supplémentaire. Il est également possible d'utiliser lesoutils de développement du navigateur pour vérifier la présence de l'élément<tbody> dans leDOM.

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 dupré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 sectionssé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 structurationsé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 aupré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 dansl'exemple ci-dessus, lesélecteur de typetbody 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 del'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 dupré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'attributcolspan 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é CSSbackground-color pour définir la couleur d'arrière-plan de chaque cellule du corps
• La propriété CSSborder pour contrôler les bordures des cellules du corps
• La propriété CSStext-align pour aligner horizontalement le contenu de chaque cellule du corps
• La propriété CSSvertical-align pour aligner verticalement le contenu de chaque cellule du corps