<caption> : l'élément de légende d'un tableau

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'élément <caption> définit la légende (ou le titre) d'un tableau.

Exemple interactif

Catégories de contenu	Aucune.
Contenu autorisé	Contenu de flux.
Omission de balises	La balise de fin peut être absente si l'élément n'est pas immédiatement suivi d'un blanc ASCII ou d'un commentaire.
Parents autorisés	Un élément `<table>` dont il doit être le premier descendant.
Rôle ARIA implicite	Pas de rôle correspondant
Rôles ARIA autorisés	Aucun.
Interface DOM	`HTMLTableCaptionElement`

Attributs

On peut utiliser les attributs universels sur cet élément.

Attributs obsolètes

align Obsolète

Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir :

left: La légende est affichée à gauche du tableau
top: La légende est affichée au-dessus du tableau
right: La légende est affichée à droite du tableau
bottom: La légende est affichée en dessous du tableau

Note : Ne pas utiliser cet attribut. Il a été déprécié. L'élément <caption> devrait être mis en forme grâce au CSS. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS caption-side et text-align.

Notes d'utilisation

L'élément <caption> devrait être le premier élément enfant de l'élément parent <table>.

Quand l'élément <table> (étant le parent de l'élément <caption>) n'est que l'unique descendant d'un élément <figure>, c'est l'élément <figcaption> doit être utilisé.

Utiliser la propriété background-color sur le tableau ne modifiera pas l'apparence de la légende. Il est également nécessaire d'ajouter une déclaration CSS avec background-color sur l'élément <caption> pour que celui-ci ait la même couleur.

Exemples

Cet exemple simple présente un tableau qui comprend une légende.

HTML

html

<table>
  <caption>
    Légende de l'exemple
  </caption>
  <tr>
    <th>Connexion</th>
    <th>Courriel :</th>
  </tr>
  <tr>
    <td>utilisateur1</td>
    <td>utilisateur1@test.fr</td>
  </tr>
  <tr>
    <td>utilisateur2</td>
    <td>utilisateur2@test.fr</td>
  </tr>
</table>

caption {
  caption-side: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  border: 1px solid black;
}

Résultat

Spécifications

Specification
HTML Standard # the-caption-element

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Les propriétés CSS particulièrement utiles pour styliser l'élément <caption> :
- text-align
- caption-side.