Balise th HTML - Apprendre HTML

La balise <th> définit une cellule d'en-tête dans un tableau HTML. Elle doit être utilisée comme élément enfant de <tr>, qui est lui-même placé à l'intérieur de la balise <table>. Pour définir une cellule de données standard, on utilise la balise <td>.

Cette page explique ce que fait <th>, comment étendre des cellules avec colspan et rowspan, et — surtout — comment rendre les en-têtes de tableau accessibles avec l'attribut scope et le modèle id/headers, afin que les lecteurs d'écran puissent annoncer le bon en-tête pour chaque cellule.

La balise <th> peut contenir du texte, des images, des formulaires, des liens ou tout autre élément HTML pouvant être utilisé dans le corps d'un document HTML. La taille du tableau est automatiquement ajustée en fonction de la taille de son contenu.

Dans les tableaux HTML, les données sont organisées verticalement en colonnes. Si vous souhaitez afficher la première ligne du tableau comme des étiquettes ou des titres, vous devez utiliser des éléments <th> plutôt que des éléments <td> pour cette ligne. Par défaut, le contenu de la balise <th> est en gras et centré. Pour modifier son apparence, vous pouvez utiliser des styles CSS. Les en-têtes de tableau peuvent également être stylisés indépendamment du reste du contenu du tableau.

Notez que toutes les lignes d'un tableau doivent avoir le même nombre de cellules. Si une ligne a moins de cellules, le navigateur génère les cellules manquantes de façon implicite. Ces cellules implicites héritent des styles de bordure du tableau. Si vous devez indiquer que certaines cellules ne contiennent pas de données, créez des cellules vides aux emplacements appropriés. Si des cellules implicites apparaissent consécutivement, elles peuvent être rendues comme une seule cellule fusionnée.

Syntaxe

La balise <th> fonctionne en paires. Le contenu est écrit entre les balises ouvrante (<th>) et fermante (</th>).

Balise HTML <th>

<table> 
  <tr> 
    <th>...</th> 
  </tr> 
</table>

Exemple de la balise HTML `<th>` :

Mois et Date — Exemple de la balise HTML <th> — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>June</td>
          <td>18.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez vous-même »

Résultat

Dans cet exemple, nos en-têtes sont "Month" et "Date", que nous définissons à l'aide des balises <th>. Nous plaçons les deux balises à l'intérieur d'un élément <tr>.

L'attribut colspan est généralement utilisé avec la balise <th> pour permettre au contenu de s'étendre sur plusieurs colonnes. Voyons cela en action.

Exemple de la balise HTML `<th>` avec l'attribut colspan :

Exemple avec un attribut colspan — Balise HTML <th> — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      tr {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th colspan="2">Month and Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jun</td>
          <td>18.07.2014</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez vous-même »

Dans cet exemple, la valeur de l'attribut colspan est "2". Cela signifie que la cellule d'en-tête unique s'étend sur deux colonnes.

Exemple de la balise HTML `<th>` avec l'attribut rowspan

L'attribut rowspan est l'équivalent vertical de colspan : il permet à une cellule d'en-tête de s'étendre sur plusieurs lignes. Cela est utile lorsqu'un en-tête s'applique à plusieurs lignes de données.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: 30px auto;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Day</th>
          <th>Slot</th>
          <th>Activity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th rowspan="2" scope="rowgroup">Monday</th>
          <td>Morning</td>
          <td>HTML basics</td>
        </tr>
        <tr>
          <td>Afternoon</td>
          <td>CSS basics</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Ici, la cellule d'en-tête "Monday" utilise rowspan="2", donc elle couvre à la fois les lignes du matin et de l'après-midi.

L'attribut scope

La fonctionnalité d'accessibilité la plus importante de <th> est l'attribut scope. Il indique aux technologies d'assistance — les lecteurs d'écran en particulier — quelles cellules un en-tête décrit. Les utilisateurs voyants déduisent cela de la mise en page, mais un lecteur d'écran lit les cellules une par une et a besoin de scope pour annoncer le bon en-tête avant chaque cellule de données.

scope accepte quatre valeurs significatives :

Valeur	L'en-tête s'applique à…
`col`	chaque cellule dans la colonne en dessous
`row`	chaque cellule dans la ligne à sa droite
`colgroup`	un groupe de colonnes (utilisé avec `<colgroup>`)
`rowgroup`	un groupe de lignes (par ex. toutes les lignes dans un `<tbody>`)

Un tableau peut avoir des en-têtes dans les deux directions. Les en-têtes de colonne se trouvent dans le <thead> avec scope="col" ; l'étiquette de début de ligne est un <th scope="row"> à l'intérieur du <tbody>.

Exemple d'un tableau entièrement accessible utilisant scope

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: 30px auto;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
        text-align: left;
      }
      thead th,
      tbody th {
        background-color: #1c87c9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Weekly study plan</caption>
      <thead>
        <tr>
          <th scope="col">Day</th>
          <th scope="col">Topic</th>
          <th scope="col">Hours</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Monday</th>
          <td>HTML</td>
          <td>2</td>
        </tr>
        <tr>
          <th scope="row">Tuesday</th>
          <td>CSS</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Lorsqu'un utilisateur de lecteur d'écran arrive sur la cellule contenant 3, il peut annoncer "Tuesday, Hours, 3" car l'en-tête de colonne (scope="col") et l'en-tête de ligne (scope="row") sont tous les deux non ambigus.

Accessibilité

Pourquoi scope est important

Un tableau de données est une grille de relations : chaque <td> appartient à un ou plusieurs en-têtes. Les utilisateurs voyants lisent ces relations visuellement ; les utilisateurs de lecteurs d'écran ne le font pas. Marquer les cellules d'en-tête avec <th> et leur donner un scope correct est ce qui permet aux technologies d'assistance d'énoncer le bon en-tête à voix haute lorsque l'utilisateur parcourt le tableau. Sans cela, un tableau complexe n'est qu'un flux de valeurs déconnectées.

`<th>` vs. `<td role>`

Utilisez toujours un vrai élément <th> pour les en-têtes plutôt que de styliser un <td> pour qu'il paraisse en gras. Un <th> porte automatiquement la sémantique d'en-tête ; un simple <td> ne le fait pas, quelle que soit son apparence. Recourir à role="columnheader" ou role="rowheader" sur un <td> doit être un dernier recours (par exemple, lorsque vous ne pouvez pas modifier le balisage). Un <th> natif avec scope est plus simple et mieux pris en charge.

Le modèle `id` / `headers` pour les tableaux complexes

scope fonctionne bien pour les grilles simples, mais ne peut pas exprimer toutes les relations dans des tableaux avec des étendues irrégulières ou plusieurs niveaux d'en-têtes. Pour ceux-là, donnez un id à chaque en-tête et listez les ids d'en-têtes pertinents sur chaque cellule de données via l'attribut headers (séparés par des espaces). Cela lie explicitement chaque cellule à ses en-têtes.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table { border-collapse: collapse; margin: 30px auto; }
      th, td { padding: 10px; border: 1px solid #666; }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th id="name">Name</th>
          <th id="q1">Q1</th>
          <th id="q2">Q2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th id="alice" headers="name">Alice</th>
          <td headers="alice q1">120</td>
          <td headers="alice q2">150</td>
        </tr>
        <tr>
          <th id="bob" headers="name">Bob</th>
          <td headers="bob q1">90</td>
          <td headers="bob q2">110</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Maintenant, la cellule contenant 150 est explicitement associée à la fois à l'en-tête de ligne Alice et à l'en-tête de colonne Q2, de sorte qu'un lecteur d'écran peut annoncer "Alice, Q2, 150" sans aucune ambiguïté.

L'attribut `abbr`

Lorsque le texte complet d'un en-tête est long, l'attribut abbr fournit une version abrégée. Certains navigateurs vocaux lisent cette forme abrégée (au lieu de répéter le titre long) à chaque fois qu'ils annoncent une cellule dans cette colonne, ce qui rend la navigation dans les tableaux larges beaucoup moins fastidieuse.

<th scope="col" abbr="HDI">Human Development Index</th>

Le texte visible reste "Human Development Index", mais un lecteur d'écran peut annoncer chaque cellule de cette colonne simplement comme "HDI".

Attributs

Seuls abbr, colspan, rowspan, headers et scope sont valides en HTML5. Les lignes marquées Obsolète ci-dessous sont des attributs de présentation dépassés — ne les utilisez pas ; obtenez le même résultat avec CSS à la place.

Attribut	Valeur	Description
abbr	texte	Définit une version abrégée du contenu dans une cellule d'en-tête. Certains agents utilisateurs, comme les lecteurs vocaux, peuvent annoncer cette forme courte plutôt que le texte complet.
colspan	nombre	Définit le nombre de colonnes sur lesquelles une cellule doit s'étendre. La valeur doit être un entier positif. La valeur par défaut est 1.
headers	header_id	Une liste d'ids de cellules d'en-tête séparés par des espaces qui décrivent cette cellule. Chaque valeur doit correspondre à l'`id` d'une cellule d'en-tête. Utilisé pour les tableaux complexes.
rowspan	nombre	Le nombre de lignes sur lesquelles une cellule doit s'étendre. La valeur doit être un entier positif. La valeur par défaut est 1. Les valeurs supérieures à 65534 sont ramenées à 65534.
scope	col / colgroup / row / rowgroup	Déclare quelles cellules l'en-tête concerne. Essentiel pour l'accessibilité des tableaux.
align	left / right / center	Obsolète. Alignait le contenu. Utilisez CSS `text-align` à la place.
axis	category_name	Obsolète. Catégorisait les cellules avec un contenu similaire.
background	url	Obsolète. Définissait une image de fond. Utilisez CSS `background` à la place.
bgcolor	rgb(x,x,x) / #xxxxxx / colorname	Obsolète. Définissait la couleur de fond. Utilisez CSS `background-color`.
bordercolor	color	Obsolète. Définissait la couleur de la bordure. Utilisez CSS `border`.
char	character	Obsolète. Alignait le contenu sur un caractère (uniquement avec `align="char"`).
charoff	number	Obsolète. Décalage du caractère d'alignement.
height	% / pixels	Obsolète. Définissait la hauteur de la cellule. Utilisez CSS `height`.
nowrap	nowrap	Obsolète. Empêchait le retour à la ligne du contenu. Utilisez CSS `white-space: nowrap`.
sorted	(various)	Obsolète. Définissait le sens de tri d'une colonne.
valign	top / middle / bottom / baseline	Obsolète. Alignement vertical. Utilisez CSS `vertical-align`.
width	% / pixels	Obsolète. Définissait la largeur de la cellule. Utilisez CSS `width`.

La balise <th> prend également en charge les Attributs globaux et les Attributs d'événement.

Comment styliser une balise HTML `<th>`

th {
  background-color: #f2f2f2;
  color: #333;
  padding: 8px;
  border: 1px solid #ccc;
}

Balises associées

<table> — le conteneur du tableau
<tr> — une ligne de tableau
<td> — une cellule de données standard
<thead> — regroupe la ou les lignes d'en-tête
<tbody> — regroupe les lignes du corps
<caption> — le titre du tableau

Exercice

Pratique

Quel est le rôle principal de l'élément HTML th ?

Il définit une cellule d'en-tête, lui conférant une sémantique d'en-tête que les technologies d'assistance peuvent associer aux cellules de données correspondantes.Il représente une cellule de données ordinaire dans le corps d'un tableau.Il regroupe le contenu du pied de page dans un long tableau.Son seul rôle est d'afficher le texte en caractères gras.Il crée une nouvelle ligne de tableau.

Syntaxe

Exemple de la balise HTML <th> :