caption-side |
Côté légende |
| CSS |
|
Syntaxe
caption-side: paramètres;
|
Paramètres
| Paramètre |
Description |
| paramètres |
Ce paramètre de propriété permet d'indiquer le type d'alignement : |
| bottom |
Cette constante indique que l'alignement sera effectué à partir du bas |
| left |
Cette constante indique que l'alignement sera effectué à partir de gauche |
| right |
Cette constante indique que l'alignement sera effectué à partir de droite |
| top |
Cette constante indique que l'alignement sera effectué à partir du haut |
Description
Cette propriété permet de définir la position d'alignement de cellule de titre d'un tableau.
Remarques
- Fonctionnalité principale : La propriété caption-side permet de positionner la légende (<caption>) d'un tableau
HTML. Par défaut, la légende est placée au-dessus du tableau (top), mais avec cette propriété, vous pouvez la déplacer en
bas (bottom) pour s'adapter à différents besoins de mise en page.
- Application restreinte : La propriété caption-side ne s'applique qu'aux éléments <caption> utilisés dans les tableaux
HTML. Si un élément autre que <caption> utilise cette propriété, elle n'aura aucun effet. Cela limite son usage aux
scénarios spécifiques liés aux tableaux.
- Valeurs possibles : Les valeurs principales pour cette propriété sont top et bottom. Certaines versions anciennes de CSS proposaient
également left et right pour les légendes verticales, mais ces valeurs ne sont pas largement prises en charge et sont considérées comme obsolètes.
- Impact sur l'accessibilité : La position de la légende peut avoir un impact sur l'accessibilité et la lisibilité. Une légende en haut (top) est
généralement préférable pour donner un contexte immédiat au tableau, tandis qu'une légende en bas (bottom) peut convenir dans des documents où les détails du tableau
sont expliqués en bas.
- Compatibilité des navigateurs Web : La propriété caption-side est bien prise en charge par la plupart des navigateurs modernes, mais les valeurs comme
left et right ne sont pas uniformément implémentées. Par conséquent, pour une compatibilité optimale, il est préférable de s'en tenir aux valeurs
top et bottom.
- Effet sur les styles personnalisés : Si la légende est stylisée avec d'autres propriétés CSS comme text-align, font-size ou
padding, ces styles restent appliqués quelle que soit la valeur de caption-side. Cela offre une grande flexibilité pour personnaliser l'apparence des
légendes.
- Utilisation avec des tableaux complexes : Dans les tableaux complexes ou volumineux, l'utilisation de caption-side pour positionner la légende peut
contribuer à améliorer l'organisation visuelle. Par exemple, une légende en bas peut être utile pour les tableaux où le contenu doit être exploré avant de lire la
description.
- Impact sur la structure du DOM : La propriété caption-side ne modifie pas la structure du DOM ni
l'ordre des éléments. Même si la légende est visuellement déplacée en bas du tableau, elle reste le premier enfant du tableau dans le DOM,
ce qui est important pour le SEO et l'accessibilité.
Dernière mise à jour : Dimanche, le 20 décembre 2015
