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

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

L'élément HTML <caption> définit la légende (ou le titre) d'un tableau, fournissant à ce dernier un nom accessible ou une description accessible.

Exemple interactif

<table>
  <caption>
    Faits sur Musclor et Skeletor
  </caption>
  <tbody>
    <tr>
      <td></td>
      <th scope="col" class="heman">Musclor</th>
      <th scope="col" class="skeletor">Skeletor</th>
    </tr>
    <tr>
      <th scope="row">Rôle</th>
      <td>Héros</td>
      <td>Méchant</td>
    </tr>
    <tr>
      <th scope="row">Arme</th>
      <td>Épée du pouvoir</td>
      <td>Bâton du chaos</td>
    </tr>
    <tr>
      <th scope="row">Secret inavoué</th>
      <td>Fleuriste expert</td>
      <td>Pleure devant les comédies romantiques</td>
    </tr>
  </tbody>
</table>

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250 250 250);
}

tr:nth-child(odd) td {
  background-color: rgb(240 240 240);
}

.heman {
  font:
    1.4rem "molot",
    sans-serif;
  text-shadow:
    1px 1px 1px white,
    2px 2px 1px black;
}

.skeletor {
  font:
    1.7rem "rapscallion",
    fantasy;
  letter-spacing: 3px;
  text-shadow:
    1px 1px 0 white,
    0 0 9px black;
}

Attributs

Cet élément inclut les attributs universels.

Les attributs suivants sont obsolètes et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour de code existant et pour des raisons historiques uniquement.

align Obsolète: Définit de quel côté du tableau la légende doit être affichée. Les valeurs énumérées possibles sont left, top, right ou bottom. Utilisez les propriétés CSS caption-side et text-align à la place, car cet attribut est obsolète.

Notes d'utilisation

Si présent, l'élément <caption> doit être le premier enfant de son élément parent <table>.
Lorsqu'un tableau (<table>) est imbriqué dans un élément HTML <figure> comme unique contenu de la figure, il doit être légendé via un <figcaption> pour le <figure> au lieu d'un <caption> imbriqué dans le <table>.
Toute couleur background-color appliquée à un tableau ne s'applique pas à sa légende. Ajoutez aussi un background-color à l'élément <caption> si vous souhaitez que la même couleur soit appliquée aux deux.

Exemples

Voir <table> pour un exemple complet de tableau présentant les standards courants et les bonnes pratiques.

Tableau avec légende

Cet exemple montre un tableau de base qui inclut une légende décrivant les données présentées.

Un tel « titre » est utile pour les utilisateur·ice·s qui parcourent rapidement la page, et il est particulièrement bénéfique pour les personnes malvoyantes, leur permettant de déterminer rapidement la pertinence du tableau sans avoir à faire lire le contenu de nombreuses cellules par un lecteur d'écran juste pour savoir de quoi il s'agit.

HTML

Un élément <caption> est utilisé comme premier enfant du tableau (<table>), avec un contenu textuel similaire à un titre pour décrire les données du tableau. Trois lignes, la première étant une ligne d'en-tête, avec deux colonnes, sont créées à l'aide des éléments <tr>, <th> et <td> après le <caption>.

html

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

CSS

Quelques règles CSS de base sont utilisées pour aligner et mettre en valeur le <caption>.

css

caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

Résultat

Résumé technique

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	`caption`
Rôles ARIA autorisés	Aucun `role` autorisé
Interface DOM	`HTMLTableCaptionElement`

Spécifications

Specification
HTML # the-caption-element

Compatibilité des navigateurs

Voir aussi

Apprendre : bases des tableaux HTML
Autres éléments liés aux tableaux : <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>
caption-side : Propriété CSS pour positionner le <caption> par rapport à son parent <table>
text-align : Propriété CSS pour aligner horizontalement le contenu textuel du <caption>

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨2 déc. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content