Balise HTML <caption>
La balise <caption> sert à définir un titre ou une description pour un tableau. Il ne s'agit pas d'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 d'ouverture, et elle doit être le premier enfant de son élément parent <table>. Une seule légende est autorisée par tableau.
Lorsque l'élément <table> contenant <caption> est le seul descendant de l'élément <figure>, vous devez utiliser l'élément <figcaption> au lieu de <caption>.
Par défaut, une légende de tableau est alignée au centre au-dessus du tableau. Vous pouvez utiliser les propriétés text-align et caption-side pour l'aligner et la positionner.
Syntaxe
La balise <caption> s'utilise par paires. Le contenu est écrit entre les balises d'ouverture (<caption>) et de fermeture (<​/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
| Étudiant | 1er examen | 2e examen |
|---|---|---|
| John Johnson | 75 | 65 |
| Mary Nicolson | 55 | 80 |
| Max Thomson | 60 | 47 |
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 la légende horizontalement ou verticalement. Non utilisé en HTML5. Utilisez CSS caption-side à la place. |
La balise <caption> prend en charge les Attributs globaux et les Attributs d'événement.
Pour une meilleure accessibilité, assurez-vous que la légende est associée de manière programmatique au tableau afin que les lecteurs d'écran puissent l'annoncer correctement. L'élément <caption> est automatiquement lié à son élément parent <table>.
Comment styliser une balise HTML <caption>
{
"tag_name": "caption"
}Pratique
Parmi les affirmations suivantes concernant la balise HTML <caption>, laquelle est correcte selon l'article de w3docs.com ?