La balise HTML <caption>
La balise HTML <caption> définit un titre pour un tableau. Elle doit être le premier enfant de <table>. Syntaxe, style et accessibilité avec exemples.
La balise <caption> sert à définir un titre ou une description pour un tableau. Ce n'est pas un en-tête de colonne (utilisez <th> pour cela). La balise elle-même doit se trouver à l'intérieur de l'élément <table> immédiatement après la balise ouvrante, et doit être le premier enfant de son élément parent <table>. Un seul titre est autorisé par tableau.
Par défaut, le titre d'un tableau est centré au-dessus du tableau. Vous pouvez utiliser les propriétés text-align et caption-side pour l'aligner et le positionner.
Quand utiliser <caption> plutôt que <figcaption>
Il existe deux façons d'étiqueter un tableau, et le bon choix dépend du conteneur du tableau :
- Utilisez
<caption>lorsque le tableau est autonome. Le titre appartient à l'intérieur de l'élément<table>et lui est associé par programmation. - Utilisez
<figcaption>lorsque le tableau est l'unique contenu d'un élément<figure>. Dans ce cas, la figure fournit l'étiquette et un<caption>séparé n'est pas utilisé.
<figure>
<table>
<thead>
<tr>
<th>Planet</th>
<th>Diameter (km)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Earth</td>
<td>12,742</td>
</tr>
<tr>
<td>Mars</td>
<td>6,779</td>
</tr>
</tbody>
</table>
<figcaption>Diameters of the inner planets</figcaption>
</figure>Ici, le tableau est l'unique contenu de la figure, donc le libellé se trouve dans <figcaption> (qui, contrairement à <caption>, peut aussi être placé après le tableau).
Syntaxe
La balise <caption> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<caption>) et fermante (</caption>).
Exemple de la balise HTML <caption> :
Balise HTML <caption>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table { width: 400px; border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 4px; }
</style>
</head>
<body>
<table>
<caption>Evaluation paper</caption>
<thead>
<tr>
<th>Student</th>
<th>1st exam</th>
<th>2nd exam</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Johnson</td>
<td>75</td>
<td>65</td>
</tr>
<tr>
<td>Mary Nicolson</td>
<td>55</td>
<td>80</td>
</tr>
<tr>
<td>Max Thomson</td>
<td>60</td>
<td>47</td>
</tr>
</tbody>
</table>
</body>
</html>Résultat
Le tableau rendu affiche le titre « Evaluation paper » centré au-dessus des données :
Exemple de la balise HTML <caption> avec la propriété CSS caption-side :
Exemple de la balise HTML <caption> avec la propriété CSS caption-side
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #cccccc;
color: #666666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "bottom":</p>
<table>
<caption>Some title here</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| align | left, right, center, top, bottom | Aligne le titre horizontalement ou verticalement. Non utilisé en HTML5. Utilisez la propriété CSS caption-side à la place. |
La balise <caption> prend en charge les attributs globaux et les attributs d'événement.
Accessibilité : pourquoi <caption> est important
Un <caption> est bien plus qu'un titre visible — c'est le nom accessible du tableau. Comme l'élément est un enfant de <table>, les navigateurs les associent automatiquement ; vous n'avez pas besoin de aria-labelledby ni d'aucun balisage supplémentaire. Lorsqu'un lecteur d'écran entre dans le tableau, il annonce le titre en premier, donnant à l'utilisateur le contexte nécessaire (« Evaluation paper, tableau avec 3 colonnes ») avant de lire les cellules. Sans titre, l'utilisateur entend une suite de chiffres sans savoir ce qu'ils représentent.
Quand le titre doit être visuellement masqué
Parfois, un en-tête se trouve déjà à côté du tableau et un titre visible semblerait redondant. Ne supprimez pas le titre — cela prive les utilisateurs non-voyants du contexte. Conservez plutôt le <caption> et masquez-le visuellement avec CSS tout en le laissant dans l'arbre d'accessibilité :
caption.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}Un aria-label sur le <table> peut également fournir un nom accessible, mais <caption> est préférable : il fonctionne sans ARIA, fait partie du texte du document (il est donc traduit et indexable), et la technique de masquage visuel le rend lisible aux développeurs voyants. Recourez à aria-label uniquement lorsque vous ne pouvez pas ajouter un titre au balisage.
<caption> remplace l'attribut summary obsolète
L'ancien HTML possédait un attribut summary sur <table> qui contenait une description destinée aux utilisateurs de lecteurs d'écran. Il n'était jamais visible et est obsolète en HTML5 — ne l'utilisez pas. Le remplacement moderne et accessible est un <caption> pour le titre court, plus un paragraphe ordinaire (éventuellement lié avec aria-describedby) lorsqu'une explication plus longue de la structure du tableau est nécessaire.
Comment styliser la balise <caption>
Le titre est une boîte de niveau bloc que vous pouvez styliser comme n'importe quel autre élément. Les ajustements les plus courants concernent sa position par rapport au tableau, son alignement et sa mise en valeur :
caption {
caption-side: bottom; /* move the caption below the table (default is top) */
text-align: left; /* override the default centering */
font-weight: bold;
padding: 6px;
color: #1c87c9;
}Consultez les propriétés caption-side et text-align pour plus de détails, et la balise <table> pour le balisage complet d'un tableau.