thead facebook twitter youtube

La balise <thead> (En-tête du tableau html)

 

Représente un en-tête de tableau, utilisé en conjonction avec <tbody> et <tfoot>. Il doit être placé après <caption> et <colgroup> s’il y a lieu, et avant <tbody> ou <tfoot>.

Son contenu est constitué d’enfants <tr>, eux-mêmes constitués d’un ou plusieurs <th>. La spécification HTML n’autorise pas d’y placer des cellules classiques <td>, car il ne s’agit pas de cellules pouvant représenter une tête de tableau.

 

Style par défaut

 


thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}
 

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

<table width="50%" align="center" cellpadding="0" cellspacing="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">Remarques...</td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">
        <div >
          <table width="100%" cellpadding="0" cellspacing="0" >
            <tr>
            <td >Produit 1</td><td style="width:120px;">Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
            <tr><td>Produit 1</td><td>Produit 2</td></tr>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

 

Titre 1 Titre 2  
Remarques...  
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2
Produit 1 Produit 2


  • table

    table

    Est destiné à contenir des données tabulaires,

    .......
    Voir Plus
  • tfoot

    tfoot

    Représente un pied de tableau

    .......
    Voir Plus
  • tbody

    tbody

    Corps du tableau html

    .......
    Voir Plus
  • tr

    tr

    Permet de déclarer une nouvelle ligne dans le  tableau.

    .......
    Voir Plus
  • td

    td

    La balise <td> déclare les cellules d'un tableau html.

    .......
    Voir Plus
  • th

    th

    Elle n'est à utiliser que pour définir les titres d'un tableau , régulièrement employée dans la première ligne de l'élément table dans le but de mettre en valeur les titres des colonnes.

    .......
    Voir Plus
  • caption

    caption

    Est d’attribuer une légende ou un titre à un tableau de données.

    .......
    Voir Plus
  • colgroup

    colgroup

    Placé en début de <table> est utilisé pour spécifier des propriétés communes à un groupe de colonnes.

    .......
    Voir Plus
  • col

    col

    Utilise pour décrire l'apparence des colonnes d'un tableau. Elle est ainsi employée uniquement à l'intérieur de l'élément <table>

    .......
    Voir Plus
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces