<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 <caption> définit la légende (ou le titre) d'un tableau.
Exemple interactif
<table>
<caption>
He-Man and Skeletor facts
</caption>
<tr>
<td></td>
<th scope="col" class="heman">He-Man</th>
<th scope="col" class="skeletor">Skeletor</th>
</tr>
<tr>
<th scope="row">Role</th>
<td>Hero</td>
<td>Villain</td>
</tr>
<tr>
<th scope="row">Weapon</th>
<td>Power Sword</td>
<td>Havoc Staff</td>
</tr>
<tr>
<th scope="row">Dark secret</th>
<td>Expert florist</td>
<td>Cries at romcoms</td>
</tr>
</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;
text-shadow:
1px 1px 1px #fff,
2px 2px 1px #000;
}
.skeletor {
font: 1.7rem rapscallion;
letter-spacing: 3px;
text-shadow:
1px 1px 0 #fff,
0 0 9px #000;
}
| 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
alignObsolè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
right-
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 CSScaption-sideettext-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
<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 # the-caption-element |
Compatibilité des navigateurs
Chargement…
Voir aussi
- Les propriétés CSS particulièrement utiles pour styliser l'élément
<caption>: