Accueil    HTML    Balise THEAD
 



balise thead  Balise THEAD : En-tête du tableau html

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


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari




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 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2