<tbody> : l'élément de corps d'un tableau
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
L'élément HTML <tbody>
permet de regrouper un ou plusieurs éléments <tr>
afin de former le corps d'un tableau HTML (<table>
).
Exemple interactif
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é.
Catégories de contenu | Aucune. |
---|---|
Contenu autorisé | Zéro ou plusieurs éléments <tr> . |
Omission de balises | L'élément <tbody> n'est pas un élément fils obligatoire de <table> . Cependant, il doit être présent si l'élément parent <table> possède un élément <thead> , <tfoot> ou un autre élément <tbody> comme autre élément enfant. Si l'élément <tbody> démarre avec un élément <tbody> et qu'il ne suit pas un élément <tbody> qui n'est pas fermé, la balise ouvrante peut être omise. |
Parents autorisés | L'élément <tbody> doit être au sein d'un élément <table> et peut être ajouté après un élément <caption> , <colgroup> , <thead> . |
Rôle ARIA implicite | rowgroup |
Rôles ARIA autorisés | Tous les rôles sont autorisés. |
Interface DOM | HTMLTableSectionElement |
Attributs
Cet élément inclut les attributs universels.
Attributs dépréciés
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
etcharoff
.
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 navigateurstext-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'attributalign
ne vaut paschar
, 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.
Notes d'utilisation
- 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.
Exemples
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>
.
Exemple simple
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 :
Plusieurs corps de tableau
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
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;
}
Spécifications
Specification |
---|
HTML Standard # the-tbody-element |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Les autres éléments HTML relatifs aux tableaux :
- 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 « . »)
- La pseudo-classe