Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
caption-side
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.
La propriétéCSScaption-side place le contenu de lalégende d'un tableau sur le côté défini. Les valeurs sont relatives au mode d'écriture (writing-mode) du tableau.
Exemple interactif
caption-side: top;caption-side: bottom;<section> <table> <caption> Animaux célèbres </caption> <tr> <th>Nom</th> <th>Lieu</th> </tr> <tr> <td>Girafe</td> <td>Afrique</td> </tr> <tr> <td>Manchot</td> <td>Antarctique</td> </tr> <tr> <td>Paresseux</td> <td>Amérique du Sud</td> </tr> <tr> <td>Tigre</td> <td>Asie</td> </tr> </table></section>table { font-size: 1.2rem; text-align: left; color: black;}th,td { padding: 0.2rem 1rem;}caption { background: #ffcc33; padding: 0.5rem 1rem;}tr { background: #eeeeee;}tr:nth-child(even) { background: #cccccc;}Syntaxe
/* Valeurs directionnelles */caption-side: top;caption-side: bottom;/* Valeur globales */caption-side: inherit;caption-side: initial;caption-side: revert;caption-side: revert-layer;caption-side: unset;La propriétécaption-side se paramètre à l'aide d'un des mots-clés suivants.
Valeurs
topUn mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.
bottomUn mot-clé qui indique que la boîte de la légende doit être positionnée en dessous du tableau.
Note :Le moduledes propriétés et valeurs logiques CSS définit deux valeurs logiques,inline-start etinline-end, pour placer la boîte de légende respectivement au début et à la fin de l'axe en ligne du tableau. Ces valeurs ne sont prises en charge par aucun navigateur.
Définition formelle
| Valeur initiale | top |
|---|---|
| Applicabilité | éléments qui sont des légendes de tableaux |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
caption-side =
top|
bottom
Exemples
Définir les légendes au-dessus et en dessous
HTML
<table> <caption> Une légende au-dessus du tableau </caption> <tr> <td>Des données d'un tableau</td> <td>Pfiou encore des données</td> </tr></table><br /><table> <caption> Une légende en dessous du tableau </caption> <tr> <td>Des données d'un tableau</td> <td>Pfiou encore des données</td> </tr></table>CSS
.top caption { caption-side: top;}.bottom caption { caption-side: bottom;}table { border: 1px solid red;}td { border: 1px solid blue;}Résultat
Spécifications
| Specification |
|---|
| Cascading Style Sheets Level 2 # propdef-caption-side |
| CSS Logical Properties and Values Module Level 1 # caption-side |