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é CSS caption-side place le contenu de la lé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 class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<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
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.
Note :
Le module des propriétés et valeurs logiques CSS définit deux valeurs logiques, inline-start et inline-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 spécifié |
| Type d'animation | discrète |
Syntaxe formelle
caption-side =
top |
bottom
Exemples
Définir les légendes au-dessus et en dessous
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>
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 |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<caption> - Les tableaux CSS
- Les propriétés et valeurs logiques CSS