L'élémentHTML<th> définit une cellule comme l'en-tête d'un groupe de cellules de tableau et peut être utilisé comme enfant de l'élément<tr>. La nature exacte de ce groupe est définie par les attributsscope etheaders.

Exemple interactif

<table>  <caption>    Stars du football extraterrestre  </caption>  <tr>    <th scope="col">Joueur·euse</th>    <th scope="col">Gloobles</th>    <th scope="col">Za'taak</th>  </tr>  <tr>    <th scope="row">TR-7</th>    <td>7</td>    <td>4 569</td>  </tr>  <tr>    <th scope="row">Khiresh Odo</th>    <td>7</td>    <td>7 223</td>  </tr>  <tr>    <th scope="row">Mia Oolong</th>    <td>9</td>    <td>6 219</td>  </tr></table>

th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}th[scope="col"] {  background-color: #505050;  color: white;}th[scope="row"] {  background-color: #d6ecd4;}td {  text-align: center;}tr:nth-of-type(even) {  background-color: #eeeeee;}table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}caption {  caption-side: bottom;  padding: 10px;}

Attributs

Cet élément inclut lesattributs universels.

abbr

Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même.

colspan

Une valeur entière positive ou nulle indiquant sur combien de colonnes la cellule d'en-tête s'étend. La valeur par défaut est1. Les agents utilisateur ignorent les valeurs supérieures à 1000 comme incorrectes et les ramènent à la valeur par défaut1.

headers

Cet attribut est une liste de chaînes de caractères séparées par des espaces. Chacune correspond à l'attributid de l'élément<th> qui s'applique à cet élément.

rowspan

Une valeur entière positive ou nulle indiquant sur combien de lignes la cellule d'en-tête s'étend. La valeur par défaut est1 ; si sa valeur est définie à0, la cellule d'en-tête s'étend jusqu'à la fin de la section de regroupement du tableau (<thead>,<tbody>,<tfoot>, même si elle est définie implicitement) à laquelle appartient le<th>. Les valeurs supérieures à65534 sont ramenées à65534.

scope

Cet attribut référence les cellules auxquelles l'élément<th> est lié. Les valeursénumérées possibles sont :

• row : Indique que l'en-tête s'applique à toutes les cellules de la ligne à laquelle appartient cet élément ;
• col : Indique que l'en-tête s'applique à toutes les cellules de la colonne à laquelle appartient cet élément ;
• rowgroup : Indique que l'en-tête appartient à un groupe de lignes et s'applique à toutes ses cellules ;
• colgroup : Indique que l'en-tête appartient à un groupe de colonne et concerne toutes ses cellules.

Si l'attributscope n'est pas défini ou que sa valeur n'est pasrow,col,rowgroup, oucolgroup, le navigateur sélectionnera automatiquement l'ensemble de cellules auquel s'applique l'en-tête.

Attributs obsolètes

Les attributs suivants sont obsolètes et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour de code existant et pour des raisons historiques uniquement.

alignObsolète

Définit l'alignement horizontal de la cellule d'en-tête. Les valeursénumérées possibles sontleft,center,right,justify etchar. Lorsque cela est pris en charge, la valeurchar aligne le contenu textuel sur le caractère défini dans l'attributchar et sur le décalage défini par l'attributcharoff. Utilisez plutôt la propriété CSStext-align, car cet attribut est obsolète.

axisObsolète

Contient une liste de chaînes de caractères séparées par des espaces, chacune correspondant à l'attributid d'un groupe de cellules auquel la cellule d'en-tête s'applique. Utilisez l'attributscope à la place, car cet attribut est obsolète.

bgcolorObsolète

Définit la couleur d'arrière-plan de la cellule d'en-tête. La valeur est une couleur HTML ; soit uncode RGB hexadécimal à 6 chiffres, préfixé d'un#, soit unmot-clé de couleur. Les autres valeurs CSS<color> ne sont pas prises en charge. Utilisez la propriété CSSbackground-color à la place, car cet attribut est obsolète.

charObsolète

Ne fait rien. Il était à l'origine destiné à définir l'alignement du contenu sur un caractère de la cellule d'en-tête. Les valeurs typiques incluent un point (.) pour aligner des nombres ou des valeurs monétaires. Sialign n'est pas défini àchar, cet attribut est ignoré.

charoffObsolète

Ne fait rien. Il était à l'origine destiné à définir le nombre de caractères de décalage du contenu de la cellule d'en-tête par rapport au caractère d'alignement défini par l'attributchar.

heightObsolète

Définit une hauteur recommandée pour la cellule d'en-tête. Utilisez la propriété CSSheight à la place, car cet attribut est obsolète.

valignObsolète

Définit l'alignement vertical de la cellule d'en-tête. Les valeursénumérées possibles sontbaseline,bottom,middle ettop. Utilisez la propriété CSSvertical-align à la place, car cet attribut est obsolète.

widthObsolète

Définit une largeur recommandée pour la cellule d'en-tête. Utilisez la propriété CSSwidth à la place, car cet attribut est obsolète.

Notes d'utilisation

• L'élément<th> ne peut être utilisé qu'à l'intérieur d'un élément<tr>.

• Dans des contextes simples, l'utilisation de l'attributscope sur les cellules d'en-tête (éléments<th>) est redondante carscope est déduit. Cependant, certaines technologies d'assistance peuvent ne pas l'inférer correctement, donc définir explicitement la portée de l'en-tête peut améliorer l'expérience utilisateur.

• Lorsque les attributscolspan etrowspan sont utilisés pour étendre les cellules d'en-tête sur plusieurs colonnes et lignes, les cellules sans ces attributs définis (avec une valeur par défaut de1) sont automatiquement placées dans les espaces libres disponibles de la structure du tableau qui couvrent des cellules 1x1, comme illustré dans la figure suivante :

  

  Note :Ces attributs ne doivent pas être utilisés pour superposer des cellules.

Exemples

Voir<table> pour un exemple complet de tableau présentant les standards courants et les bonnes pratiques.

En-têtes de colonnes et de lignes simples

Cet exemple utilise des éléments<th> pour introduire des en-têtes de colonnes et de lignes dans une structure de tableau basique.

HTML

La première ligne (élément<tr>) contient les en-têtes de colonnes (éléments<th>), qui servent de « titres » pour les colonnes afin de faciliter la compréhension des informations et l'identification des données. Pour indiquer que chaque en-tête de colonne concerne toutes les cellules de la colonne correspondante, l'attributscope est défini àcol (colonne).

Les lignes suivantes contiennent les données principales du tableau. Chacune de ces lignes possède un en-tête de ligne (élément<th>) introduit comme première cellule. Cela crée une colonne d'en-têtes de ligne en première colonne du tableau. Comme pour les en-têtes de colonnes, l'attributscope est défini àrow pour indiquer à quelles cellules chaque en-tête de ligne se rapporte, qui dans l'exemple ci-dessous sont toutes les cellules de données (éléments<td>) de chaque ligne.

<table>  <tr>    <th scope="col">Symbole</th>    <th scope="col">Mot code</th>    <th scope="col">Prononciation</th>  </tr>  <tr>    <th scope="row">A</th>    <td>Anatole</td>    <td>ANA tol</td>  </tr>  <tr>    <th scope="row">B</th>    <td>Berthe</td>    <td>BER t</td>  </tr>  <tr>    <th scope="row">C</th>    <td>Célestine</td>    <td>CÉ lest ine</td>  </tr>  <tr>    <th scope="row">D</th>    <td>Désiré</td>    <td>DÉ zi ré</td>  </tr></table>

CSS

Quelques règles CSS de base sont utilisées pour mettre en forme le tableau et ses cellules. Nous utilisons lessélecteurs d'attributs CSS pour cibler les cellules d'en-tête selon la valeur de leur attributscope, afin de mettre en évidence les en-têtes de colonnes et de lignes (éléments<th>) et de les différencier entre eux et des cellules de données (<td>).

th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}th[scope="col"] {  background-color: #505050;  color: white;}th[scope="row"] {  background-color: #d6ecd4;}tr:nth-of-type(odd) td {  background-color: #eeeeee;}

table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}

Résultat

Extension de colonnes et de lignes

Cet exemple étend et améliore le tableau basique duprécédent exemple en ajoutant une seconde ligne pour des en-têtes de colonnes supplémentaires.

HTML

Une ligne de tableau supplémentaire (élément<tr>) est ajoutée comme seconde ligne d'en-tête du tableau avec deux en-têtes de colonnes supplémentaires (éléments<th>). Ainsi, la colonne « Prononciation » est divisée en deux colonnes, une pour la notation API (Alphabet Phonétique International) et une pour la prononciation simplifiée (la colonne de prononciation d'origine). Les cellules de données correspondantes (éléments<td>) sont ajoutées à chaque ligne suivante.

Comme indiqué dans lesnotes d'utilisation, les attributscolspan etrowspan peuvent être utilisés sur les éléments<th> pour répartir les cellules d'en-tête dans les bonnes colonnes et lignes. Pour obtenir un en-tête sur « deux lignes » dans la structure du tableau, les deux premières cellules d'en-tête de la première ligne<tr> sont étendues sur deux lignes. La troisième cellule d'en-tête s'étend sur deux colonnes (toujours dans la première ligne). Cette configuration laisse deux zones disponibles dans la troisième et la quatrième colonne de la seconde ligne, où les deux en-têtes de la seconde ligne<tr> sont automatiquement placés, la valeur par défaut étant1 pour les attributscolspan etrowspan.

<table>  <tr>    <th scope="col" rowspan="2">Symbole</th>    <th scope="col" rowspan="2">Mot code</th>    <th scope="col" colspan="2">Prononciation</th>  </tr>  <tr>    <th scope="col">API</th>    <th scope="col">Prononciation simplifiée</th>  </tr>  <tr>    <th scope="row">A</th>    <td>Anatole</td>    <td>anatɔl</td>    <td>ANA tol</td>  </tr>  <tr>    <th scope="row">B</th>    <td>Berthe</td>    <td>bɛʁt</td>    <td>BER t</td>  </tr>  <tr>    <th scope="row">C</th>    <td>Célestine</td>    <td>selɛstin</td>    <td>CÉ lest ine</td>  </tr>  <tr>    <th scope="row">D</th>    <td>Denise</td>    <td>dəniz</td>    <td>DE niz</td>  </tr></table>

CSS

Le CSS est inchangé par rapport auprécédent exemple.

table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}th[scope="col"] {  background-color: #505050;  color: white;}th[scope="row"] {  background-color: #d6ecd4;}tr:nth-of-type(odd) td {  background-color: #eeeeee;}

Résultat

Associer des cellules d'en-tête à d'autres cellules d'en-tête

Pour des relations plus complexes entre cellules d'en-tête, l'utilisation des élémentsth avec l'attributscope seul peut ne pas suffire pour les technologies d'assistance, en particulier les lecteurs d'écran.

HTML

Pour améliorer l'accessibilité duprécédent exemple et permettre, par exemple, aux lecteurs d'écran d'énoncer les en-têtes associés à chaque cellule d'en-tête, l'attributheaders peut être introduit avec des attributsid. En raison de la façon dont la colonne « Prononciation » est divisée en deux colonnes dans l'exemple, introduisant un en-tête sur « deux lignes », les technologies d'assistance comme les lecteurs d'écran peuvent ne pas être capables d'identifier à quelles autres cellules d'en-tête (élémentsth) la cellule d'en-tête « Prononciation » est liée, et inversement. Par conséquent, l'attributheaders est utilisé sur les cellules d'en-tête « Prononciation », « API » et « Prononciation simplifiée » pour associer les cellules d'en-tête concernées en fonction des valeurs des identifiants uniques ajoutés via les attributsid sous forme de liste séparée par des espaces.

<table>  <tr>    <th scope="col" rowspan="2">Symbole</th>    <th scope="col" rowspan="2">Mot code</th>    <th scope="col" colspan="2" headers="i r">Prononciation</th>  </tr>  <tr>    <th scope="col" headers="p">API</th>    <th scope="col" headers="p">Prononciation simplifiée</th>  </tr>  <tr>    <th scope="row">A</th>    <td>Anatole</td>    <td>anatɔl</td>    <td>ANA tol</td>  </tr>  <tr>    <th scope="row">B</th>    <td>Berthe</td>    <td>bɛʁt</td>    <td>BER t</td>  </tr>  <tr>    <th scope="row">C</th>    <td>Célestine</td>    <td>selɛstin</td>    <td>CÉ lest ine</td>  </tr>  <tr>    <th scope="row">D</th>    <td>Denise</td>    <td>dəniz</td>    <td>DE niz</td>  </tr></table>

Résultat

Lerésultat visuel est inchangé par rapport autableau de l'exemple précédent.

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Apprendre : bases des tableaux HTML
• Les autres éléments HTML relatifs aux tableaux :<caption>,<col>,<colgroup>,<table>,<tbody>,<td>,<tfoot>,<thead>,<tr>
• La propriété CSSbackground-color pour définir la couleur d'arrière-plan de chaque cellule d'en-tête
• La propriété CSSborder pour contrôler les bordures des cellules d'en-tête
• La propriété CSSheight pour contrôler la hauteur recommandée de la cellule d'en-tête
• La propriété CSStext-align pour aligner horizontalement le contenu de chaque cellule d'en-tête
• La propriété CSSvertical-align pour aligner verticalement le contenu de chaque cellule d'en-tête
• La propriété CSSwidth pour contrôler la largeur recommandée de la cellule d'en-tête
• Les pseudo-classes CSS:nth-of-type,:first-of-type,:last-of-type pour sélectionner les cellules d'en-tête souhaitées