Balise HTML <légende>


Exemple

Un tableau avec une légende :

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Plus d'exemples "Essayez-le vous-même" ci-dessous.


Définition et utilisation

La <caption>balise définit une légende de tableau.

La <caption>balise doit être insérée immédiatement après la balise <table> .

Astuce : Par défaut, une légende de tableau sera centrée au-dessus d'un tableau. Cependant, les propriétés CSS text-align et caption-side peuvent être utilisées pour aligner et placer la légende.


Prise en charge du navigateur

Element
<caption> Yes Yes Yes Yes Yes

Attributs globaux

La <caption>balise prend également en charge les attributs globaux en HTML .


Attributs d'événement

La <caption>balise prend également en charge les attributs d'événement en HTML .



Plus d'exemples

Exemple

Légendes du tableau de position (avec CSS) :

<table>
  <caption style="text-align:right">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<br>

<table>
  <caption style="caption-side:bottom">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Pages connexes

Référence HTML DOM : objet de légende


Paramètres CSS par défaut

La plupart des navigateurs afficheront l' <caption>élément avec les valeurs par défaut suivantes :

Exemple

caption {
  display: table-caption;
  text-align: center;
}