caption-side
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
* Some parts of this feature may have varying levels of support.
La propriété caption-side permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément <caption> du tableau). Les valeurs sont relatives au mode d'écriture (cf. writing-mode) du tableau.
Exemple interactif
caption-side: top; caption-side: bottom; <section class="default-example" id="default-example"> <table class="transition-all" id="example-element"> <caption> Famous animals </caption> <tr> <th>Name</th> <th>Location</th> </tr> <tr> <td>Giraffe</td> <td>Africa</td> </tr> <tr> <td>Penguin</td> <td>Antarctica</td> </tr> <tr> <td>Sloth</td> <td>South America</td> </tr> <tr> <td>Tiger</td> <td>Asia</td> </tr> </table> </section> table { font-size: 1.2rem; text-align: left; color: #000; } th, td { padding: 0.2rem 1rem; } caption { background: #fc3; padding: 0.5rem 1rem; } tr { background: #eee; } tr:nth-child(even) { background: #ccc; } Syntaxe
/* Valeurs avec un mot-clé */ /* Valeurs directionnelles */ caption-side: top; caption-side: bottom; /* Valeurs logiques */ caption-side: block-start; caption-side: block-end; caption-side: inline-start; caption-side: inline-end; /* 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
top-
Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.
bottom-
Un mot-clé qui indique que la boîte de la légende doit être positionnée en dessous du tableau.
block-start-
Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé au début de l'axe de bloc.
block-end-
Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé à la fin de l'axe de bloc.
inline-start-
Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé au début de l'axe en ligne.
inline-end-
Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé à la fin de l'axe en ligne.
Définition formelle
| Valeur initiale | top |
|---|---|
| Applicabilité | éléments qui sont des légendes de tableaux |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
caption-side =
top |
bottom
Exemples
CSS
.top caption { caption-side: top; } .bottom caption { caption-side: bottom; } table { border: 1px solid red; } td { border: 1px solid blue; } HTML
<table class="top"> <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 class="bottom"> <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> Résultat
Spécifications
| Specification |
|---|
| Cascading Style Sheets Level 2 # propdef-caption-side |
| CSS Logical Properties and Values Level 1 # caption-side |
Compatibilité des navigateurs
Loading…