Tag HTML <thead>

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

Résultat

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>:

La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
La propriété CSS font-size définit la taille de la police.
La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.

Coloration du texte dans le tag HTML <thead>:

La propriété CSS color décrit la couleur du contenu et les décorations du texte.
La propriété CSS background-color définit la couleur de fond d’un élément.

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

La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
La propriété CSS word-break spécifie où les lignes doivent être cassées.

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

La propriété CSS text-shadow ajoute des ombres au texte.
La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
La propriété CSS line-height spécifie la hauteur d’une ligne.
La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
La propriété CSS word-spacing permet de définir l’espacement entre les mots.