Balise HTML `<thead>`

La balise <thead> définit l'en-tête d'un tableau HTML. Cette balise est utilisée conjointement avec les balises <tbody> et <tfoot>, qui spécifient respectivement le corps et le pied de page du tableau.

La balise <thead> doit être utilisée comme enfant de l'élément <table>, après les éléments <caption> et <colgroup>, et avant les éléments <tfoot>, <tbody> et <tr>. (Vous ne pouvez utiliser qu'une seule balise <thead> à l'intérieur de <table>).

Notez que la balise <tfoot> doit être placée avant <tbody>, afin que le navigateur puisse afficher correctement le pied de page du tableau.

DANGER

La balise <thead> doit contenir au moins un élément <tr>.

TIP

Les éléments <thead>, <tbody> et <tfoot> n'affectent pas la mise en page du tableau par défaut. Utilisez les propriétés CSS pour personnaliser l'apparence du tableau.

Syntaxe

La balise <thead> s'utilise par paires. Le contenu est écrit entre les balises d'ouverture (<thead>) et de fermeture (</thead>).

Balise HTML <thead>

html

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

Exemple de la balise HTML `<thead>` :

Balise HTML <thead>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Résultat

exemple thead

Attributs

Attribut	Valeurs	Description
align	right left center justify char	Spécifie l'alignement du contenu à l'intérieur d'un élément `<thead>`. Non pris en charge dans HTML5
bgcolor	bgcolor	Définit la couleur de fond des lignes à l'intérieur d'un élément `<thead>`. Non pris en charge dans HTML5
char	character	Spécifie l'alignement du contenu à l'intérieur d'un élément `<thead>` sur un caractère. Il est utilisé uniquement lorsque l'attribut est align="char". Non pris en charge dans HTML5.
charoff	number	Spécifie le nombre de caractères dont le contenu à l'intérieur de l'élément `<thead>` sera aligné par rapport au caractère spécifié par l'attribut char. Il est utilisé uniquement lorsque l'attribut est align="char". Non pris en charge dans HTML5.
valign	top bottom middle baseline	Spécifie un alignement vertical du contenu à l'intérieur d'un élément `<thead>`. Non pris en charge dans HTML5.

La balise <thead> prend en charge les Attributs globaux et les Attributs d'événement.

Comment styliser une balise HTML <thead>

css

thead {
  background-color: #f2f2f2;
  font-weight: bold;
}

Pratique

Quelle est la fonction de la balise HTML <thead> ?

Elle est utilisée pour regrouper le contenu du pied de page dans un tableau HTML.Elle est utilisée pour regrouper le contenu de l'en-tête dans un tableau HTML.Elle est utilisée pour définir une ligne dans un tableau HTML.Elle est utilisée pour regrouper le contenu du corps dans un tableau HTML.Elle contribue à améliorer l'accessibilité en fournissant des informations sur la structure des données du tableau.

Balise HTML <thead> ​

Syntaxe ​

Exemple de la balise HTML <thead> : ​

Résultat ​