Propriété CSS caption-side
La propriété caption-side définit l'emplacement de l'élément HTML <caption> au sein d'un tableau HTML. La balise <caption> est utilisée pour donner un titre à un tableau. Le titre (légende) du tableau peut être placé en bas ou en haut du tableau.
Cette propriété possède deux valeurs standardisées : top et bottom. La valeur top indique que la boîte de légende doit être placée au-dessus du tableau. La valeur bottom indique qu'elle doit être placée en dessous du tableau.
Il existe quatre autres valeurs non standardisées : left, right, top-outside et bottom-outside. Ces valeurs ont été proposées dans CSS 2 mais n'ont pas été incluses dans CSS 2.1. Elles sont actuellement obsolètes et ne sont prises en charge que par Firefox. Leur utilisation en production n'est pas recommandée.
La propriété caption-side peut également s'appliquer à tout élément dont la propriété display est définie sur table-caption.
| Valeur initiale | top |
|---|---|
| S'applique à | Éléments de type table-caption. |
| Héritée | Non. |
| Animable | Discrète. |
| Version | CSS 2.1 |
| Syntaxe DOM | object.style.captionSide = "top"; |
Propriété caption-side pour la légende d'un tableau
Utilisez une légende de tableau pour définir un court en-tête, tel qu'une brève description, afin de décrire la structure du tableau. L'élément <caption> doit être utilisé à cette fin. Il doit être placé immédiatement après la balise d'ouverture <table>, ce qui en fait le premier enfant du tableau. (Remarque : L'attribut summary de la balise <table> est déprécié en HTML5 et ne doit pas être utilisé.) Grâce à la propriété caption-side, vous pouvez modifier la position de la légende.
Syntaxe
Syntaxe de la propriété CSS caption-side
caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;Voici un exemple où la valeur "top" est appliquée. Elle place la légende au-dessus du tableau.
Exemple de la propriété CSS caption-side :
Exemple de la propriété CSS caption-side avec la valeur top
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
}
.top caption {
caption-side: top;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #ccc;
color: #666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "top":</p>
<table class="top">
<caption>Some title here</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</body>
</html>Résultat
Exemple de la propriété caption-side avec deux valeurs :
Exemple de la propriété CSS caption-side avec les valeurs top et bottom
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #ccc;
}
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #cccccc;
padding: 3px;
}
td {
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "top":</p>
<table class="top">
<caption>ABOVE</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
<br />
<p>Here the caption-side is set to "bottom":</p>
<table class="bottom">
<caption>BELOW</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| top | Place la légende au-dessus du tableau. Il s'agit de la valeur par défaut de cette propriété. | Tester » |
| bottom | Place la légende en dessous du tableau. | Tester » |
| left | Place la légende sur le côté gauche du tableau. Valeur non standardisée, prise en charge uniquement par Firefox. | |
| right | Place la légende sur le côté droit du tableau. Valeur non standardisée, prise en charge uniquement par Firefox. | |
| top-outside | Place la légende au-dessus du tableau. La largeur et le comportement d'alignement horizontal ne sont pas liés à la mise en page horizontale du tableau. Valeur non standardisée, prise en charge uniquement par Firefox. | |
| bottom-outside | Place la légende en dessous du tableau, tandis que la largeur et le comportement d'alignement horizontal ne sont pas liés à la mise en page horizontale du tableau. Valeur non standardisée, prise en charge uniquement par Firefox. | |
| initial | Définit la propriété sur sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété 'caption-side' en CSS ?