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

L'élément HTML <caption> représente la légende (ou le titre) d'un tableau. Il doit être le première élément parmi les descendants de l'élément <table>. La mise en forme CSS peut placer cet élément à un autre endroit par rapport au tableau et on pourra notamment utiliser les propriétés caption-side et text-align.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Attributs

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

Attributs obsolètes

align Obsolète depuis HTML4.01 Obsolète depuis HTML5

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

• left pour un affichage à gauche du tableau
• top pour un affichage au dessus du tableau
• right pour un affichage à droite du tableau
• bottom pour un affichage en dessous du tableau

Note d'utilisation : 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

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é.

Exemples

HTML

<table>
  <caption>Une légende pour un tableau</caption>
  <tr>
    <td>Bip bop bip bop</td>
    <td>Bop bip bop bip</td>
  </tr>
</table>

CSS

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

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les autres éléments HTML relatifs aux tableaux :
  • <col>
  • <colgroup>
  • <table>
  • <tbody>
  • <td>
  • <tfoot>
  • <th>
  • <thead>
  • <tr>
• Les propriétés CSS pouvant être utilisées pour mettre en forme l'élément <caption> :
  • text-align
  • caption-side.