La caption-sidepropriété en CSS vous permet de définir où positionner le HTML
élément, utilisé sur les tableaux HTML. Cette propriété peut également s'appliquer à tout élément dont la displaypropriété est définie sur caption-side.
table ( caption-side: top; )Valeurs
top: le défaut. Positionne la légende en haut du tableau.bottom: positionne la légende en bas du tableau.inherit: indique que la valeur est héritée de lacaption-sidevaleur de son parent
La caption-sidepropriété peut être appliquée soit au
element or the
display table-caption text-align
Notez que les valeurs ci-dessus pour caption-sidesont relatives au mode d'écriture de la table. Par exemple, si une table est définie sur un mode d'écriture verticale, les valeurs topet bottomseront relatives à la direction de la table.
La démo ci-dessous comprend un bouton "bascule" qui fait basculer la caption-sidepropriété de la table entre topet bottom, afin que vous puissiez voir la différence en utilisant une table avec de nombreuses lignes de données:
Voir la
démonstration Pen de la propriété caption-side par CSS-Tricks (@ css-tricks)
sur CodePen.
Dans la démo suivante, le writing-modefor the table est défini sur vertical-rl. Comme démontré en basculant à l'aide du bouton, les valeurs topet bottomsont relatives au mode d'écriture de la table:
Voir la
démonstration Pen de la propriété caption-side avec différents modes d'écriture par CSS-Tricks (@ css-tricks)
sur CodePen.
Valeurs non standard de Firefox uniquement
Firefox prend depuis longtemps en charge, et prend toujours en charge, quatre valeurs non standard pour caption-side:
left: positionne la légende à gauche du tableau.right: positionne la légende à droite du tableau.top-outside: positionne la légende en haut du tableau, avec ses dimensions indépendantes du tableaubottom-outside: positionne la légende en bas du tableau, avec ses dimensions indépendantes du tableau
La démo ci-dessous ne fonctionne que dans Firefox et vous permet d'utiliser quatre boutons pour définir les différentes valeurs non standard:
Voir la
démo Pen Firefox de la propriété caption-side par CSS-Tricks (@ css-tricks)
sur CodePen.
Nouvelles valeurs standard
Dans les dernières versions de la spécification CSS, la caption-sidepropriété fait partie des CSS Propriétés logique de niveau 1 et comprend les valeurs block-start, block-end, inline-startet inline-end. Les deux derniers correspondent aux valeurs leftet non standard et rightne doivent être pris en charge que par les agents utilisateurs qui prennent en charge ces valeurs non standard.
Plus d'information
- propriété caption-side dans la spécification CSS2.1
- propriété caption-side dans la spécification CSS2.2
- caption-side dans CSS Logical Properties 1
Prise en charge du navigateur
élément, avec le même effet. Bien que cette propriété affecte la position de la zone de légende dans son ensemble (la valeur d'une légende est calculée à), elle n'affectera pas l'alignement du texte à l'intérieur de la zone. Le texte à l'intérieur de la boîte peut être aligné à l'aide de la propriété.| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 9.2+ | 8+ | 2.1+ | 3.2+ |
La prise en charge dans le tableau ci-dessus fait référence à la prise en charge de base de la norme topet des bottomvaleurs. Firefox aussi supporte en outre la non-standard left, right, top-outsideet bottom-outsidevaleurs. Il n'y a pas de support du navigateur pour les nouveaux block-start, block-end, inline-startet les inline-endvaleurs.