Élément HTML <caption> : l'élément de légende d'un tableau - HTML | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

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

Baseline Large disponibilité *

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.

Dans cet article

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

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&nbsp;:</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 Contenu autorisé Omission de balises Parents autorisés Rôle ARIA implicite Rôles ARIA autorisés Interface DOM

Aucune.

Contenu de flux.

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.

Un élément <table> dont il doit être le premier descendant.

caption

Aucun role autorisé

HTMLTableCaptionElement

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>

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 25 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu