Tag HTML <tbody>

L’élément <tbody> est utilisé pour définir le contenu (corps) du tableau. Il crée un bloc distinct dans la table auquel vous pouvez appliquer des styles ou des scripts CSS.

Pour la formation de blocs de construction dans la table, les tags <thead> (en-tête) et <tfoot> (pied de page) aussi peuvent être utilisées.

L’élément <tbody> est situé dans le tag <table> après les éléments <caption>, <colgroup> (s’ils y ont), ainsi que le tag <thead>.

Pour afficher correctement le pied de page dans le tableau, l’élément <tfoot> doit être placé devant l’élément <tbody>.

Dans le tag <tbody>, au moins un élément <tr> doit être inclus, ce qui spécifie les lignes de la table.

Dans l’élément <table> plusieurs tags <tbody> peuvent être utilisés.

Par défaut, les tags <thead>, <tbody>, et <tfoot> n’affectent pas l'apparence de la table, utilisez les styles CSS pour personnaliser l'affichage de la table.

Syntaxe

<table>
  <thead> ... </thead>
  <tfoot> ... </tfoot>
  <tbody>
    <tr>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Mois</th>
          <th>Des économies</th>
        </tr>
      </thead>
      <tfoot style="background-color:lightgrey;">
        <tr>
          <td>Janvier</td>
          <td>500</td>
        </tr>
        <tr>
          <td>Février</td>
          <td>1000</td>
        </tr>
      </tfoot>
      <tbody style="background-color:grey;">
        <!-- <tfoot> est placé après <thead>, mais est affiché sur le bas de la table. -->
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Résultat

Attributs

Attribut Valeur Description
align right
left
center
justify
char
Spécifie comment aligner le contenu d'une table.
Non supporté en HTML5.
bgcolor bgcolor Spécifie la couleur d'arrière-plan des cellules situées dans le conteneur <tbody>.
Non supporté en HTML5.
char character Indique comment aligner le contenu d'un élément avec un caractère spécifié. L'attribut char n'est utilisé que si l'attribut align = "char".
Non supporté en HTML5.
charoff number Décale le contenu des cellules par rapport au caractère spécifié. Utilisé si l'attribut align = "char".
Non supporté en HTML5.
valign top
bottom
middle
baseline
Aligne le contenu à l'intérieur de l'élément verticalement.
Non supporté en HTML5.

Le tag <tbody> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <tbody> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <tbody>:

Coloration du texte dans le tag HTML <tbody>:

Styles de mise en page du texte pour la tag HTML <tbody>:

Autres propriétés utiles pour le tag HTML <tbody>:


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées