Balise HTML <tbody>

Définition et utilisation

<tbody> est utilisé pour regrouper le contenu du texte dans un tableau HTML.

<tbody> L'élément avec <thead> et <tfoot> Les éléments combinés pour spécifier chaque partie (corps, en-tête, pied de page) du tableau.

Les navigateurs peuvent utiliser ces éléments pour afficher les en-têtes et les pieds de page indépendamment lors du défilement du corps du tableau. De plus, lors de l'impression de grands tableaux sur plusieurs pages, ces éléments permettent d'imprimer les en-têtes et les pieds de page en haut et en bas de chaque page.

Remarque :<tbody> l'élément interne doit contenir un ou plusieurs balise <tr>.

<tbody> les balises doivent être utilisées dans le contexte suivant : en tant que <table> les éléments enfants, dans n'importe quel <caption>、<colgroup> et <thead> après l'élément.

Astuce :Par défaut, les éléments <thead>、<tbody> et <tfoot> n'affectent pas la mise en page du tableau. Cependant, vous pouvez utiliser CSS pour définir les styles de ces éléments (voir les exemples ci-dessous) !

Exemple

Exemple 1

Tableau HTML contenant <thead>、<tbody> et <tfoot> :

<table>
  <thead>
    <tr>
      <th>Mois</th>
      <th>Épargne</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>janvier</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>février</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Coût total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Essayer par vous-même

Exemple 2

Utilisez CSS pour définir les styles de <thead>、<tbody> et <tfoot> :

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Mois</th>
      <th>Épargne</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>janvier</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>février</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Coût total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Essayer par vous-même

Exemple 3

Comment aligner <tbody> le contenu (utilisez CSS) :

<table style="width:100%">
  <thead>
    <tr>
      <th>Mois</th>
      <th>Épargne</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>janvier</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>février</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Essayer par vous-même

Exemple 4

Comment aligner verticalement <tbody> le contenu (utilisez CSS) :

<table style="width:50%;">
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>janvier</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>février</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Essayer par vous-même

Attributs globaux

<tbody> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<tbody> Les balises prennent également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <tbody> Élément :

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

Compatibilité des navigateurs

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support