<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

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>

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> :