diff options
Diffstat (limited to 'files/fr/web/css/caption-side/index.md')
| -rw-r--r-- | files/fr/web/css/caption-side/index.md | 121 |
1 files changed, 53 insertions, 68 deletions
diff --git a/files/fr/web/css/caption-side/index.md b/files/fr/web/css/caption-side/index.md index 46b1691fd8..1c6448b38c 100644 --- a/files/fr/web/css/caption-side/index.md +++ b/files/fr/web/css/caption-side/index.md @@ -7,15 +7,16 @@ tags: - Reference translation_of: Web/CSS/caption-side --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>caption-side</code></strong> permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément {{HTMLElement("caption")}} du tableau). Les valeurs sont relatives au mode d'écriture (cf. {{cssxref("writing-mode")}}) du tableau.</p> +La propriété **`caption-side`** permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément {{HTMLElement("caption")}} du tableau). Les valeurs sont relatives au mode d'écriture (cf. {{cssxref("writing-mode")}}) du tableau. -<div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div> +{{EmbedInteractiveExample("pages/css/caption-side.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ +```css +/* Valeurs avec un mot-clé */ /* Valeurs directionnelles */ caption-side: top; caption-side: bottom; @@ -31,82 +32,66 @@ caption-side: bottom-outside; caption-side: inherit; caption-side: initial; caption-side: unset; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>top</code></dt> - <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.</dd> - <dt><code>bottom</code></dt> - <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau.</dd> - <dt><code>left</code> {{non-standard_inline}}</dt> - <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée à gauche du tableau.<br> - {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}</dd> - <dt><code>right</code> {{non-standard_inline}}</dt> - <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée à droite du tableau.<br> - {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}</dd> - <dt><code>top-outside</code> {{non-standard_inline}}</dt> - <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.<br> - {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>top</code>, réintroduit avec cette valeur dans une future spécification.")}}</dd> - <dt><code>bottom-outside</code> {{non-standard_inline}}</dt> - <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.<br> - {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>bottom</code>, réintroduit avec cette valeur dans une future spécification.")}}</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +``` + +### 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. +- `left` {{non-standard_inline}} + - : Un mot-clé qui indique que la boîte de la légende doit être positionnée à gauche du tableau. + {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}} +- `right` {{non-standard_inline}} + - : Un mot-clé qui indique que la boîte de la légende doit être positionnée à droite du tableau. + {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}} +- `top-outside` {{non-standard_inline}} + - : Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau. + {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>top</code>, réintroduit avec cette valeur dans une future spécification.")}} +- `bottom-outside` {{non-standard_inline}} + - : Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau. + {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>bottom</code>, réintroduit avec cette valeur dans une future spécification.")}} + +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush:css">caption { +```css +caption { caption-side: bottom; } -</pre> +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><table> - <caption>Une légende</caption> - <tr> - <td>Des données d'un tableau</td> - <td>Pfiou encore des données</td> - </tr> -</table></pre> +```html +<table> + <caption>Une légende</caption> + <tr> + <td>Des données d'un tableau</td> + <td>Pfiou encore des données</td> + </tr> +</table> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples","300","300")}}</p> +{{EmbedLiveSample("Exemples","300","300")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties', '#caption-side', 'caption-side')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td>Les valeurs <code>top</code> et <code>bottom</code> sont désormais définies comme relatives à la valeur de <code>writing-mode</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS Logical Properties', '#caption-side', 'caption-side')}} | {{Spec2('CSS Logical Properties')}} | Les valeurs `top` et `bottom` sont désormais définies comme relatives à la valeur de `writing-mode`. | +| {{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}} | {{Spec2('CSS2.1')}} | Définition initiale. | -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.properties.caption-side")}}</p> +{{Compat("css.properties.caption-side")}} |