Balise HTML <thead>

Définition et utilisation

<thead> est utilisé pour regrouper le contenu des titres dans les tableaux HTML.

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

Les navigateurs peuvent utiliser ces éléments pour permettre une affichage indépendant des en-têtes et des pieds de page lors du défilement du corps du tableau. De plus, lors de l'impression de grands tableaux répartis sur plusieurs pages, ces éléments permettent d'imprimer les en-têtes et les pieds de page au sommet et au bas de chaque page.

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

<thead> Les balises doivent être utilisées dans le contexte suivant : en tant que <table> les éléments enfants de l'élément, à tout moment <caption> et <colgroup> après l'élément, et à tout moment </tbody>、<tfoot> et <tr> avant l'élément.

Astuce :Par défaut,<thead>、<tbody> et <tfoot> éléments 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 des éléments <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>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Essayer personnellement

Exemple 2

Définir les styles de <thead>、<tbody> et <tfoot> en utilisant CSS :

<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>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Essayer personnellement

Exemple 3

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

<table style="width:100%">
  <thead style="text-align:left">
    <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>
</table>

Essayer personnellement

Exemple 4

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

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <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>
</table>

Essayer personnellement

Attributs globaux

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

Attributs d'événement

<thead> 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 <thead> Élément :

thead {
  display: table-header-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