caption-side - Propriété CSS
Description de caption-side
.
caption-side
définit la position du titre d'un tableau.
Ce titre doit être une balise caption incluse dans la balise table, avant
la balise tbody.
Exemple de code HTML d'un tableau comportant la balise caption.
table
captionTitre du tableau/caption
tbody
tr
td.../td
...
/tr
/tbody
/table
Remarque : cette propriété peut être appliquée à la balise caption ou à la balise table.
La propriété text-align
peut être utilisée conjointement avec caption-side
pour compléter le
positionnement du titre du tableau.
Prise en charge du mode d'écriture.
Les valeurs top
et bottom
sont en fait des valeurs logiques qui prennent en compte la direction
d'écriture.
Le titre du tableau peut donc se retrouver à droite ou à gauche si la direction d'écriture est verticale :
valeurs vertical-lr
ou vertical-rl
affectées à la propriété writing-mode
.
Le simulateur ci-dessous permet de visualiser ce mécanisme.
Syntaxes pour caption-side
.
- caption-side: top;
Valeur par défaut. Le titre est positionné au début du tableau. Cette valeur est donc traitée comme s'il s'agissait de
block-start
. Si le mode d'écriture est le mode européen, le titre sera positionné au dessus du tableau mais ce ne sera pas forcément le cas dans d'autres modes d'écriture (voir la propriétéwriting-mode
). - caption-side: bottom;
Le titre est positionné à la fin du tableau (valeur traitée comme
block-end
). En mode d'écriture européen, le titre est positionné en dessous du tableau mais dans d'autres modes d'écriture le titre peut être placé à un autre emplacement (voir la propriétéwriting-mode
). - caption-side: left; ⚠
Le titre est positionné à gauche du tableau. Attention ! Cette valeur est très peu reconnue par les navigateurs.
- caption-side: right; ⚠
Le titre est positionné à droite du tableau. Attention ! Cette valeur est très peu reconnue par les navigateurs.
- caption-side: top-outside; ⚠ caption-side: bottom-outside; ⚠
Ces deux valeurs sont proposées par l'inspecteur de Firefox, mais même ce navigateur ne les traite pas ou plud. Leur rôle est de positionner le titre au dessus ou en dessous du tableau, tout en conservant un positionnement horizontal indépendant de celui du tableau. Par exemple si le tableau a une largeur inférieure à la largeur disponible, le titre peut lui s'étendre sur toute la largeur disponible.
- caption-side: inline-start; ⚠ caption-side: inline-end; ⚠
Valeurs équivalentes à
right
etleft
mais prenant en compte le sens d'écriture (de gauche à droite ou de droite à gauche).Dans la mesure où les valeurs
right
etleft
sont peu reconnues, ces deux valeurs sont également peu prise en charge par les navigateurs. - caption-side:
initial
; caption-side:inherit
; caption-side:revert
; caption-side:revert-layer
; caption-side:unset
;La valeur initiale est :
.top
Animation de caption-side
.
L'animation de caption-side
est possible mais présente, à notre avis, peu d'intérêt.
Manipulation de la propriété caption-side
par programme.
Le petit tableau ci-dessous servira de démonstration pour les exemples de code donnés après.
A | B | C |
D | E | F |
Modifier la valeur de caption-side
en Javascript.
Deux syntaxes sont possibles en Javascript pour modifier la valeur d'une propriété :
- Avec le nom de la propriété écrit dans la notation
kebab-case
, typique de css (un tiret pour séparer les mots). - Ou bien le nom de la propriété écrit en notation
camel-case
(une lettre majuscule pour séparer les mots).
function setCaptionSide(el) {
el.style['caption-side']='bottom';
// ou
el.style.captionSide='bottom';
}
Lire en Javascript la valeur de caption-side
.
Ce deuxième code explore l'attribut style
du HTML. Pour qu'il retrouve la valeur d'une propriété, cette dernière doit avoir
été définie dans cet attribut style
, et non via un sélecteur CSS.
function getCaptionSide(el) {
alert(el.style['caption-side']);
// ou
alert(el.style.captionSide);
}
Lire la valeur calculée de caption-side
en Javascript.
La valeur calculée résulte soit d'une valeur affectée à la propriété directement sur l'élément (via l'attribut style
ou via
un sélecteur CSS), soit d'une valeur héritée suivant le mécanisme d'héritage habituel, ou encore il peut s'agir de la valeur initiale
de la propriété.
function getCalcCaptionSide(el) {
alert(window.getComputedStyle(el).getPropertyValue('caption-side'));
}
Modifier la valeur de la propriété caption-side
avec JQuery.
function setCaptionSide(el) {
$(el).css('caption-side','top');
// ou
$(el).css('captionSide','top');
}
Lire la valeur calculée de la propriété caption-side
avec JQuery.
function getCalcCaptionSide(el) {
alert($(el).css('caption-side'));
// ou
alert($(el).css('captionSide'));
}
Exemple interactif.
Janvier | Février | Mars | Avril |
Mai | Juin | Juillet | Août |
Septembre | Octobre | Novembre | Décembre |
Prise en charge de caption-side
par les navigateurs.
Le tableau ci-dessous montre que la propriété caption-side
est bien reconnue par les navigateurs.
Cependant certains points de la spécification ne sont pas correctement traités :
caption-side
.
caption-side
.
caption-side
caption-side
(Logical)
values
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que caption-side
.
Les spécifications CSS éditées par le W3C sont organisées en modules. caption-side
fait partie du Module CSS - Tableaux (CSS Table Module). Les définitions suivantes sont également décrites dans ce même module.