--- title: '
: l''élément de corps d''un tableau' slug: Web/HTML/Element/tbody tags: - Element - HTML - Reference - Tableaux - Web translation_of: Web/HTML/Element/tbody ---L’élément HTML <tbody>
permet de regrouper un ou plusieurs éléments {{HTMLElement("tr")}} afin de former le corps d'un tableau HTML ({{HTMLElement("table")}}).
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
L'élément <tbody>
, ainsi que les éléments {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}}, fournit 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.
left
: le contenu de la cellule est alligné à 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 {{htmlattrxref("char", "tbody")}} et {{htmlattrxref("charoff", "tbody")}} {{unimplemented_inline(2212)}}.Si cet attribut n’est pas renseigné, la valeur left
est prise par défaut.
left
, center
, right
ou justify
, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.char
, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tbody")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.#
. Un de ces seize mots-clés peut également être utilisé.
black = "#000000" |
green = "#008000" |
||
silver = "#C0C0C0" |
lime = "#00FF00" |
||
gray = "#808080" |
olive = "#808000" |
||
white = "#FFFFFF" |
yellow = "#FFFF00" |
||
maroon = "#800000" |
navy = "#000080" |
||
red = "#FF0000" |
blue = "#0000FF" |
||
purple = "#800080" |
teal = "#008080" |
||
fuchsia = "#FF00FF" |
aqua = "#00FFFF" |
bgcolor
, il est possible d’utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.char
, l’attribut est ignoré.baseline
qui alignera 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
qui placera le texte au plus bas de la cellule ;middle
qui centrera verticalement le texte dans la cellule ;top
qui placera le texte au plus haut de la cellule.<tbody>
doit apparaître après.<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 {{HTMLElement("tr")}} qui soient des éléments fils directs de {{HTMLElement("table")}} si on utilise <tbody>
.<tbody>
fournit des informations sémantiques supplémentaires pour les appareils d'affichage ou d'impression.<tbody>
représente le contenu qui, lorsqu'il est plus long qu'une page, sera différent sur chaque page. En revanche, {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}} seront les mêmes ou seront semblables sur chacune des pages.<tbody>
permet d'obtenir un défilement séparé pour les éléments {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} et {{HTMLElement("caption")}} d'un même élément {{HTMLElement("table")}}.<thead>
, <tfoot>
et <caption>
, on peut utiliser plusieurs éléments <tbody>
(à la suite). Cela permet de répartir les lignes des grands tableaux en différentes sections, chacune pouvant être mise en forme distinctement.<table> <thead> <tr> <th>Contenu d'en-tête 1</th> <th>Contenu d'en-tête 2</th> </tr> </thead> <tfoot> <tr> <td>Pied de tableau 1</td> <td>Pied de tableau 2</td> </tr> </tfoot> <tbody> <tr> <td>Contenu interne 1</td> <td>Contenu interne 2</td> </tr> </tbody> </table>
table { border: 2px solid #555; border-collapse: collapse; }
{{EmbedLiveSample("Exemples","100%","150")}}
Note : Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur <tbody>
.
Catégories de contenu | Aucune. |
---|---|
Contenu autorisé | Zéro ou plusieurs éléments {{HTMLElement("tr")}}. |
Omission de balises | L'élément {{HTMLElement("tbody")}} n'est pas un élément fils obligatoire de {{HTMLElement("table")}}. Cependant, il ne doit pas être présent si l'élément parent {{HTMLElement("table")}} possède un élément {{HTMLElement("tr")}} comme élément fils. |
Parents autorisés | L'élément <tbody> doit être au sein d'un élément {{HTMLElement("table")}} et peut être ajouté après un élément {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}} ou {{HTMLElement("tfoot")}}. |
Rôles ARIA autorisés | Tous les rôles sont autorisés. |
Interface DOM | {{domxref("HTMLTableSectionElement")}} |
Spécification | État | Commentaires |
---|---|---|
{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}} | {{Spec2('HTML5 W3C')}} |
{{Compat("html.elements.tbody")}}
<tbody>
: