HTML th : ajouter des en-têtes aux tableaux HTML
Les en-têtes de tableau (en anglais table headers) HTML permettent d’ajouter de la structure à vos tableaux. La balise HTML <th> met en évidence les colonnes ou les lignes d’un point de vue sémantique et visuel et est donc pertinente pour les utilisateurs, les moteurs de recherche et les lecteurs d’écran.
Qu’est-ce que le tag HTML <th> ?
La balise (ou tag) HTML <th> (Table Header) est utilisée pour définir des cellules d’en-tête dans les tableaux HTML. Les cellules ainsi formatées servent d’en-têtes pour les colonnes ou lignes concernées du tableau et sont généralement en gras et centrées. Si nécessaire, l’affichage peut être adapté selon les souhaits via CSS. Les en-têtes de tableau HTML doivent être utilisés à l’intérieur d’une balise <tr> (Table Row), la position dans le tableau ne jouant en principe aucun rôle. En règle générale, l’élément est surtout utilisé dans l’en-tête ou la première colonne d’un tableau pour une meilleure lisibilité du code HTML.
- 3x plus rapide, 60 % d'économie
- Haute disponibilité >99,99 %
- Seulement chez IONOS : jusqu'à 500 Go inclus
Pourquoi les Table Headers HTML sont-ils utiles ?
Les en-têtes de tableau HTML vous aident à structurer vos tableaux et à en décrire le contenu. Leur utilisation est utile et recommandée pour différentes raisons :
- Organisation des données : les en-têtes avec le tag HTML
<th>aident à présenter les données dans le tableau de manière claire et organisée. Ils donnent aux colonnes ou aux lignes un nom descriptif qui explique le type de données auxquelles on peut s’attendre. - Amélioration de la lisibilité : HTML
<th>permet aux utilisateurs de comprendre plus facilement les données énumérées. Les en-têtes visuellement mis en évidence séparent clairement les différentes catégories ou groupes de données, ce qui facilite la recherche d’informations spécifiques. - Accessibilité : les en-têtes de tableau sont particulièrement importants pour l’accessibilité. Les lecteurs d’écran utilisent les éléments
<th>pour expliquer la structure et le contexte du tableau. Grâce à des attributs supplémentaires tels quescopeouheaders, vous pouvez rendre encore plus claires les données qui appartiennent à tel ou tel en-tête.
Les en-têtes ne sont qu’un des nombreux moyens de mettre en forme les tableaux en HTML. Dans notre article séparé sur la mise en forme d’un tableau en HTML, nous abordons en détail les possibilités dont vous disposez pour adapter visuellement les textes et les champs.
La syntaxe du tag HTML <th> avec un exemple
Pour définir un titre de tableau avec la balise HTML <th>, il suffit d’une balise d’ouverture <th> et d’une balise de fermeture </th>. Le texte souhaité pour l’en-tête se trouve à l’intérieur de ces deux balises. En option, vous pouvez ajouter des attributs à la balise d’introduction afin de contrôler le comportement et l’affichage de l’élément <th>. La syntaxe de base (ici avec des caractères de remplacement pour les attributs) se présente donc comme suit :
<th attribut1="" attribut2="" …>En-tête</th>Les attributs les plus importants pour les en-têtes de tableaux HTML sont les suivants :
scope: indique si l’en-tête se réfère à une colonne (col) ou à une ligne (row).colspan: définit le nombre de colonnes auxquelles s’applique la cellule d’en-tête.rowspan: définit le nombre de lignes auxquelles s’applique la cellule d’en-tête.class: indique les noms de classes CSS qui peuvent être utilisées pour définir le style.style: pour du CSS en ligne permettant de personnaliser la cellule d’en-tête.
Pour finir, nous illustrons la syntaxe de HTML <th> par un exemple simple. Dans le tableau sont présentés les catégories et les prix pour les trois produits : « Pomme », « Pain » et « Jus ». L’en-tête et la première colonne sont définis en tant qu’en-tête. L’attribut scope permet de définir pour chaque cellule d’en-tête si elle titre une ligne ou une colonne.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de tableau HTML</title>
</head>
<body>
<table border="1">
<caption>Liste des produits et leurs catégories</caption>
<tr>
<th scope="col">Produit</th>
<th scope="col">Catégorie</th>
<th scope="col">Prix</th>
</tr>
<tr>
<th scope="row">Pomme</th>
<td>Fruit</td>
<td>1,50 €</td>
</tr>
<tr>
<th scope="row">Pain</th>
<td>Boulangerie</td>
<td>2,00 €</td>
</tr>
<tr>
<th scope="row">Jus</th>
<td>Boissons</td>
<td>1,00 €</td>
</tr>
</table>
</body>
</html>Voici un aperçu du rendu du tableau sur un site Web :
Combinaison avec la balise <caption>
Vous pouvez également donner à un tableau HTML un en-tête qui précède l’ensemble du tableau. Pour cela, il suffit d’insérer un élément <caption> (avec une balise d’ouverture et de fermeture) après avoir lancé le tableau avec <table>. Vous déterminez la présentation et le positionnement de cet en-tête à l’aide de CSS. Vous pouvez ainsi placer le texte sous un tableau, par exemple.
Si nous ajoutons à notre exemple de la section précédente un titre <caption> « Exemple de tableau pour les produits et les prix », le code correspondant se présente comme suit :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de tableau HTML</title>
</head>
<body>
<table border="1">
<caption>Exemple de tableau pour les produits et les prix</caption>
<tr>
<th scope="col">Produit</th>
<th scope="col">Catégorie</th>
<th scope="col">Prix</th>
</tr>
<tr>
<th scope="row">Pomme</th>
<td>Fruit</td>
<td>1,50 €</td>
</tr>
<tr>
<th scope="row">Pain</th>
<td>Boulangerie</td>
<td>2,00 €</td>
</tr>
<tr>
<th scope="row">Jus</th>
<td>Boissons</td>
<td>1,00 €</td>
</tr>
</table>
</body>
</html>Sur le site Web, nous voyons maintenant la nouvelle légende pour notre tableau d’exemple :
Vous trouverez d’autres informations passionnantes sur ce langage de balisage dans notre tutoriel HTML pour débutants.