HTML caption : titre de tableau et position en haut ou en bas
HTML <caption> fournit le titre ou une courte description d'un tableau entier. Placez-le comme premier élément enfant à l'intérieur de table et utilisez CSS caption-side pour contrôler s'il apparaît au-dessus ou en dessous du tableau.
Distinguer les titres de tableau des en-têtes de colonnes et de lignes
Un caption explique de quoi parle le tableau ; th identifie une colonne ou une ligne particulière. Remplacer la légende par un td dans la première ligne modifie la relation entre le titre du tableau et ses cellules de données. Utilisez un sujet et un champ spécifiques plutôt que seulement « Tableau 1 » afin que les lecteurs puissent identifier l'objectif lors d'un balayage ou d'une navigation avec une technologie d'assistance.
Utilisez seulement un caption par table. Ajoutez des interprétations détaillées, des mises en garde ou des sources de données dans le texte à proximité plutôt que de diviser le titre du tableau entre plusieurs éléments caption.
Exemple complet : vérifier la position de la légende
Enregistrez le code en tant que table-caption.html et ouvrez-le dans un navigateur. Les nombres sont des données d'exercice utilisées pour expliquer la structure du tableau.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Positionner le titre d’un tableau</title>
<style>
body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
.jb-table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem; border: 1px solid #8c9399; text-align: left; }
caption { caption-side: top; text-align: left; padding: 0.6rem 0; font-weight: bold; }
</style>
</head>
<body>
<h1>Données d’exercice</h1>
<div class="jb-table-scroll">
<table class="jb-table-01">
<caption>Nombre de documents d’exemple par catégorie dans une bibliothèque d’exercice</caption>
<thead>
<tr><th scope="col">Catégorie</th><th scope="col">Documents</th></tr>
</thead>
<tbody>
<tr><th scope="row">HTML</th><td>3</td></tr>
<tr><th scope="row">CSS</th><td>2</td></tr>
</tbody>
</table>
</div>
</body>
</html>La légende Nombre de documents d’exemple par catégorie dans une bibliothèque d’exercice apparaît au-dessus du tableau, suivie des colonnes Catégorie et Documents et de deux lignes de données. Le caption explique le but du tableau, tandis que les éléments th avec scope identifient ses en-têtes de colonnes et de lignes.
Changez le CSS caption-side: top en caption-side: bottom et rechargez la page. Le titre se déplace sous le tableau tout en restant son premier élément enfant dans HTML. Revenez à top pour restaurer la position originale. Utilisez text-align pour l’alignement horizontal plutôt que l’attribut obsolète align.
Écrivez des légendes de tableau utiles
Un caption est un titre visible et aide à fournir un nom accessible pour le tableau. Le comportement réel avec un lecteur d'écran dépend du navigateur, de la technologie d'assistance et d'autres attributs d'accessibilité. Ajouter uniquement une légende ne résout pas tous les problèmes d'accessibilité dans un tableau complexe : vérifiez également les relations entre les en-têtes et les cellules de données ainsi que l'ordre de lecture.
La couleur de fond d’un élément table ne s’applique pas automatiquement à son élément caption ; définissez-la séparément si nécessaire. Si un tableau est le seul contenu d’un élément figure, utilisez figcaption pour légender figure au lieu de répéter le même titre dans caption et figcaption. La référence MDN de caption fournit des règles et des exemples.
