web-dev-qa-db-fra.com

tableaux html: thead vs th

Selon les exemples sur cette page , de toute façon), si vous utilisez THEAD, vous n'avez pas besoin d'utiliser TH.

Est-ce vrai? Si oui, quels sont les avantages/inconvénients de THEAD vs TH?

145
chris

La balise <thead> Est utilisée pour regrouper le contenu de l'en-tête dans un tableau HTML. L'élément thead doit être utilisé conjointement avec les éléments tbody et tfoot.

Plus: thead

Vous utilisez <thead> Pour encapsuler une ligne entière (ou des lignes) afin de les désigner comme en-tête de table. Selon les spécifications,

"Cette division permet aux agents utilisateurs de prendre en charge le défilement des corps de tableau indépendamment de la tête et du pied de la table. Lorsque de longues tables sont imprimées, les informations relatives à la tête et au pied de la table peuvent être répétées sur chaque page contenant des données de table."

<th>, Quant à lui, est utilisé pour appeler une cellule spécifique sous la forme d'une cellule d'en-tête plutôt que d'une cellule de données ordinaire.

117
sgokhales

<th> est en fait un remplacement pour <td> lorsque vous souhaitez marquer une cellule en tant que cellule d’en-tête.

Si vous voulez utiliser <thead> et <th> n'oublie pas de nidifier <th> à l'intérieur <tr>. Sinon, le code peut ne pas être valide.
Exemple:

<table>
  <thead>
    <tr>
      <th>Season</th>
      <th>Goals</th>
      <th>Assists</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2009-2010</th>
      <td>25</td>
      <td>43</td>
    </tr>
    <tr>
      <th>2011-2012</th>
      <td>40</td>
      <td>20</td>
    </tr>
  </tbody>
</table>
53
rafr3

th est plus spécifique que ce qui peut résider à l'intérieur de thead. Une cellule th doit spécifier l'en-tête des cellules td correspondantes. En fait, vous pouvez ajouter un attribut headers à une cellule td qui pointe vers l'id d'une cellule th (pour les lecteurs d'écran). Donc, th est directement lié au tds de cette colonne.

Cependant, thead peut inclure n’importe quelle information ... généralement oui, il inclut les cellules th, mais il peut également inclure tout ce que vous pouvez juger approprié d’être une information en haut de la table ( autre qu'une légende, car elle possède également sa propre balise).

11
Nick Manning

<thead> est spécial en ce sens qu'il peut être utilisé pour répéter la ligne d'en-tête en haut de la page dans les versions imprimées.

<thead>

Les rangées de table peuvent être regroupées en une tête de table, un pied de table et une ou plusieurs sections de corps de table, en utilisant les éléments THEAD, TFOOT et TBODY, respectivement. Cette division permet aux agents utilisateurs de prendre en charge le défilement des corps de table indépendamment du pied et de la tête de la table. Lorsque de longs tableaux sont imprimés, les informations sur le pied et la tête du tableau peuvent être répétées sur chaque page contenant des données de tableau.

L'en-tête et le pied de table doivent contenir des informations sur les colonnes de la table. Le corps de la table doit contenir des lignes de données de table.

Lorsqu'ils sont présents, chaque THEAD, TFOOT et TBODY contient un groupe de lignes. Chaque groupe de lignes doit contenir au moins une ligne, définie par l'élément TR.

<th>

Les cellules de tableau peuvent contenir deux types d'informations: les informations d'en-tête et les données. Cette distinction permet aux agents utilisateurs de restituer distinctement les en-têtes et les cellules de données, même en l'absence de feuilles de style. Par exemple, les agents utilisateurs visuels peuvent présenter un texte de cellule d'en-tête avec une police en gras. Les synthétiseurs vocaux peuvent rendre les informations d'en-tête avec une inflexion distincte de la voix.

L'élément TH définit une cellule contenant des informations d'en-tête. Les agents d'utilisateur disposent de deux éléments d'informations d'en-tête disponibles: le contenu de l'élément TH et la valeur de l'élément Les agents utilisateurs doivent restituer le contenu de la cellule ou la valeur de l’attribut abbr. Pour les supports visuels, cette dernière peut être appropriée lorsque l’espace est insuffisant pour afficher le contenu complet de la cellule. Pour les supports non visuels abbr peut être utilisé comme abréviation pour les en-têtes de tableau lorsque ceux-ci sont rendus avec le contenu des cellules auxquelles ils s'appliquent.

Source: http://www.w3.org/TR/html4/struct/tables.html

6
smartrahat

D'après mon expérience, il n'y a pas de différence de rendu sauf si vous utilisez CSS pour spécifier une différence de rendu. UNE <td> à l'intérieur d'un <thead> rendra la même chose qu'un <th> à l'intérieur d'un <table> ou un <tbody>.

3
amphetamachine

Il n'y a pas de règles strictes ici. Le <thead> L'élément n'est qu'un autre moyen de regrouper vos colonnes et vos lignes, tout comme <tbody> et <tfoot> est. Donc, vous avez plus de possibilités pour les scripts et le formatage.

0
DanMan