Le tag HTML <thead> est utilisé avec les éléments <tbody> et <tfoot> pour séparer le contenu de la table en blocs logiques - en-tête, corps et pied de page, respectivement.

Dans une table, l'utilisation d'un tag <thead> est autorisée. Dans le code, il doit être situé immédiatement après le tag <table> s'il y a des éléments <caption> et <colgroup> après eux, mais avant les éléments <tbody>, <tfoot> et <tr>.

L’élément <thead> doit contenir au moins un élément <tr>.
Par défaut, les éléments <thead>, <tbody> et <tfoot> n’affectent pas l’apparence externe de la table, mais il peut être personnalisé en utilisant des styles CSS.

Syntaxe

<table>
  <thead>
    <tr>
      <td> ... </td>
    </tr>
  </thead>
  <tfoot> ... </tfoot>
  <tbody> ... </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>
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Janvier</td>
          <td>500</td>
        </tr>
        <tr>
          <td>Février</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Résultat

Des économies

Attributs

Attribut Valeur Description
align right
left
center
justify
char
Aligne le contenu de l’élément <thead>.
Non supporté en HTML5.
bgcolor bgcolor Définit la couleur d'arrière-plan des cellules d'un élément <thead>.
Non supporté en HTML5.
char character Aligne le contenu de la cellule avec le caractère spécifié. Utilisé uniquement si l'attribut align = "char".
Non supporté en HTML5.
charoff number L’attribut vous permet d'aligner dans la cellule de données le symbole spécifié dans l’attribut à droite ou à gauche. Utilisé uniquement si l'attribut align = "char".
Non supporté en HTML5.
valign top
bottom
middle
baseline
Spécifie l'alignement vertical du contenu de l'élément.
Non supporté en HTML5.

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

Comment styler le tag HTML <thead> ?

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

Coloration du texte dans le tag HTML <thead>:

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

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

Support de Navigateurs

chrome edge firefox safari opera

Pratiquez vos connaissances

Quel est le rôle de la balise HTML 'thead'?
Trouvez-vous cela utile?