Balise THEAD : En-tête du tableau html

« Partie précédente | Index | Partie suivante »

Tag de fermeture obligatoire | Support :

La balise <thead> est utilisée au sein d'un tableau html pour mieux structurer ses données. Elle est utilisée conjointement aux balises <tbody> et <tfoot>, chacun de ces éléments regroupant spécifiquement des types de données de la table :

   - Le tag <thead> regroupe les informations d'en-tête (en général les titres des colonnes)
   - Le tag <tbody> contient les données à proprement parlé.
   - Le tag <tfoot> réuni les informations relatives au pied de page (des références, remarques ou légendes par exemple)

Ces éléments sont structurels et ne modifient donc pas l'apparence et le rendu de la table. Pour modifier son rendu, il faut utiliser les styles CSS. Le style appliqué à l'élément thead s'appliquera à toutes les lignes qu'il contient (usuellement, les cellules déclarées dans le tag <thead> sont encadrées par la balise <th>, adaptée pour les titres des tableaux html).

D'autre part lorsque ces éléments sont utilisés, il faut respecter un ordre de déclaration spécifique : la partie thead en premier lieu suivi de la partie tfoot et enfin le bloc tbody (Le navigateur doit pouvoir afficher la partie basse tfoot avant d'avoir reçu l'ensemble des lignes du bloc principal tbody).
Des exemples sont disponibles sur les pages de présentation des balises <table> et <td>.

Remarque : on peut imaginer que ces balises permettent de créer par exemple un tableau fixe avec un scroll dans le bloc tbody, mais cela reste très difficile et dépendant du navigateur à moins d'utiliser d'autres balises et certaines propriétés CSS. Dans l'exemple qui suit, une possibilité de réaliser cet effet est décrite.

Propriétés pour la balise thead :

Propriétés	Définition	Valeurs
align	Alignement horizontal du contenu des cellules inclues sous le tag thead déprécié, appliquer le style css text-align pour un rendu similaire	center char justify left right
char	Spécifie un caractère sur lequel s'effectuera l'alignement du contenu des cellules Propriété non supportée par la plupart des navigateurs	caractère
charoff	Indique le nombre de caractères à partir duquel se fera l'alignement par rapport au caractère spécifié dans l'attribut "char" Propriété non supportée par la plupart des navigateurs	valeur
valign	Alignement vertical du contenu des cellules inclues sous le tag thead déprécié, appliquer le style css vertical-align pour un rendu similaire	baseline bottom middle top

Exemple d'utilisation de la balise thead :

Utilisation d'une div avec le style "overflow: auto" pour afficher la barre de défilement :
(On crée une colonne pour la prise en compte de la barre de défilement verticale)

<table cellspacing="0" cellpadding="0" style="border:solid 1px black; font-family:verdana; font-size:12px;">
  <thead>
    <tr style="background-color:lightgrey;">
      <th style="width:120px;">Titre 1</th>
      <th style="width:120px;">Titre 2</th>
      <th style="width:18px;"></th>
    </tr>
  </head>
  <tfoot>
    <tr style="background-color:lightgrey; text-align:center;">
      <td colspan="2">Informations complémentaires...<br/>Remarques...</td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">
        <div style="height:100px; overflow:auto; border-top:solid 1px black; border-bottom:solid 1px black;">
          <table cellspacing="0" cellpadding="0" style="color:midnightblue; font-family:verdana; font-size:12px; text-align:center;">
            <tr><td style="width:120px;">donnée 1</td><td style="width:120px;">donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Utilisation d'une div avec le style "overflow: auto" pour afficher la barre de défilement :

Titre 1

Titre 2

Informations complémentaires...
Remarques...

donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2
donnée 1	donnée 2

Tous les Tags HTML