Balise HTML <tbody>
Le tag <tbody> définit le contenu du corps (un ensemble de lignes) d’un tableau HTML, en y créant un bloc sémantique distinct. Le tag <tbody> s’utilise avec les tags <thead> et <tfoot>, qui spécifient respectivement l’en-tête et le pied du tableau.
Le tag <tbody> doit être utilisé comme enfant de l’élément <table>, après les éléments <caption>, <colgroup> (le cas échéant) et <thead>. En HTML5, l’élément <tfoot> vient soit avant, soit après l’élément <tbody>.
TIP
Les éléments <thead>, <tbody> et <tfoot> n’affectent pas la mise en page du tableau par défaut. Utilisez des propriétés CSS pour personnaliser l’apparence du tableau.
Lors de l’impression d’un document, les éléments <thead> et <tfoot> définissent les informations qui peuvent être identiques ou très similaires sur chaque page d’un tableau multipage, tandis que le contenu du tag <tbody> varie d’une page à l’autre.
En cas d’utilisation de <tbody>, vous ne pouvez pas avoir d’éléments <tr> (lignes du tableau) qui soient des enfants de l’élément <table>, mais qui ne soient pas inclus dans <tbody>. Si vous utilisez des lignes qui ne sont ni d’en-tête ni de pied de tableau, elles doivent se trouver à l’intérieur de l’élément <tbody>.
Plus d’un élément <tbody> peut être utilisé pour chaque tableau, à condition qu’ils se suivent. Cela séparera les lignes des grands tableaux en sections et vous pourrez formater chacune d’elles séparément.
Syntaxe
Le tag <tbody> se présente par paires. Le contenu est écrit entre les tags ouvrant (<tbody>) et fermant (</tbody>).
HTML <tbody> Tag
<table>
<thead> ... </thead>
<tfoot> ... </tfoot>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>Exemple du tag HTML <tbody> :
HTML <tbody> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%; margin:30px auto; border-collapse:collapse;">
<thead style="background-color:#1c87c9; color:#fff;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot style="background-color:grey;">
<!-- <tfoot> is placed after <thead>, but is shown on the bottom of the table. -->
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
<tbody style="background-color:lightgrey;">
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
</table>
</body>
</html>Résultat
Exemple du tag HTML <tbody> avec les tags <thead> et <tfoot> :
HTML <tbody> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 60%;
margin: 30px auto;
border-collapse: collapse;
}
thead {
background-color: #8ebf42;
color: #fff;
}
tbody {
background-color: #f3ebeb;
}
tfoot {
background-color: #ccc7c7;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>1500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2500</td>
</tr>
</tfoot>
</table>
</body>
</html>Attributs
| Attribute | Values | Description |
|---|---|---|
| align | right left center justify char | Spécifie l’alignement du contenu à l’intérieur de l’élément <tbody>. Non pris en charge en HTML5 |
| bgcolor | bgcolor | Définit la couleur d’arrière-plan des lignes à l’intérieur de l’élément <tbody>. Non pris en charge en HTML5. |
| char | character | Spécifie l’alignement du contenu à l’intérieur de l’élément <tbody> par rapport à un caractère. Utilisé uniquement lorsque l’attribut align="char". Non pris en charge en HTML5. |
| charoff | number | Spécifie le nombre de caractères de décalage à partir du caractère indiqué par l’attribut char pour l’alignement du contenu à l’intérieur de l’élément <tbody>. Utilisé uniquement lorsque l’attribut align="char". Non pris en charge en HTML5. |
| valign | top bottom middle baseline | Spécifie l’alignement vertical du contenu à l’intérieur de l’élément <tbody>. Non pris en charge en HTML5. |
Le tag <tbody> prend également en charge les attributs globaux et les attributs d’événement.
Comment styliser un tag HTML <tbody>
{
"tag_name": "tbody"
}Practice
What is true about the HTML <tbody> tag according to the information provided on w3docs.com?