From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/border-collapse/index.md | 166 ++++++++++++++---------------- 1 file changed, 77 insertions(+), 89 deletions(-) (limited to 'files/fr/web/css/border-collapse') diff --git a/files/fr/web/css/border-collapse/index.md b/files/fr/web/css/border-collapse/index.md index 1751aa7ddf..ce3ede58a9 100644 --- a/files/fr/web/css/border-collapse/index.md +++ b/files/fr/web/css/border-collapse/index.md @@ -7,19 +7,20 @@ tags: - Reference translation_of: Web/CSS/border-collapse --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété border-collapse détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées.

+La propriété **`border-collapse`** détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées. -
{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
+{{EmbedInteractiveExample("pages/css/border-collapse.html")}} -

Le modèle des bordures séparées est celui qui est traditionnellement utilisé par HTML. Les cellules adjacente ont des bordures distinctes et la distance entre ces bordures est définie par la propriété {{cssxref("border-spacing")}}.

+Le modèle des _bordures séparées_ est celui qui est traditionnellement utilisé par HTML. Les cellules adjacente ont des bordures distinctes et la distance entre ces bordures est définie par la propriété {{cssxref("border-spacing")}}. -

Le modèle des bordures fusionnées permet que les cellules adjacentes partagent leurs bordures. Lorsqu'on utilise ce modèle, les valeurs inset et outset de {{cssxref("border-style")}} se comportent respectivement comme groove et ridge.

+Le modèle des _bordures fusionnées_ permet que les cellules adjacentes partagent leurs bordures. Lorsqu'on utilise ce modèle, les valeurs `inset` et `outset` de {{cssxref("border-style")}} se comportent respectivement comme `groove` et `ridge`. -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 border-collapse: collapse;
 border-collapse: separate;
 
@@ -27,28 +28,27 @@ border-collapse: separate;
 border-collapse: inherit;
 border-collapse: initial;
 border-collapse: unset;
-
+``` -

La propriété border-collapse est définie avec un seul mot-clé parmi ceux définis ci-après.

+La propriété `border-collapse` est définie avec un seul mot-clé parmi ceux définis ci-après. -

Valeurs

+### Valeurs -
-
collapse
-
Un mot-clé qui indique que le modèle des bordures fusionnées doit être utilisé.
-
separate
-
Un mot-clé qui indique que le modèle des bordures séparées doit être utilisé. C'est la valeur par défaut.
-
+- `collapse` + - : Un mot-clé qui indique que le modèle des bordures fusionnées doit être utilisé. +- `separate` + - : Un mot-clé qui indique que le modèle des bordures séparées doit être utilisé. C'est la valeur par défaut. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
.collapse {
+```css
+.collapse {
   border-collapse: collapse;
 }
 .separate {
@@ -71,78 +71,66 @@ table th, table td {
 .wk { border-color: gold blue; }
 .ch { border-color: red yellow green blue; }
 .bk { border-color: navy blue teal aqua; }
-.op { border-color: red; }
- -

HTML

- -
<table class="separate">
-  <caption><code>border-collapse: separate</code></caption>
-  <tbody>
-    <tr><th>Navigateur</th> <th>Moteur de rendu</th>
-    </tr>
-    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
-    </tr>
-    <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
-    </tr>
-    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
-    </tr>
-    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
-    </tr>
-    <tr><td class="op">Opera</td> <td class="bk">Blink</td>
-    </tr>
-  </tbody>
-</table>
-<table class="collapse">
-  <caption><code>border-collapse: collapse</code></caption>
-  <tbody>
-    <tr><th>Navigateur</th> <th>Moteur de rendu</th>
-    </tr>
-    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
-    </tr>
-    <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
-    </tr>
-    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
-    </tr>
-    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
-    </tr>
-    <tr><td class="op">Opera</td> <td class="bk">Blink</td>
-    </tr>
-  </tbody>
-</table>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 400, 300)}}

- -

Spécifications

- - - - - - - - - - - - - - - - +.op { border-color: red; } +``` + +### HTML + +```html +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'tables.html#borders', 'border-collapse')}}{{Spec2('CSS2.1')}}Définition initiale.
+ + + + + + + + + + + + + + +
border-collapse: separate
Navigateur Moteur de rendu
Firefox Gecko
Internet Explorer Trident
Safari Webkit
Chrome Blink
Opera Blink
+ + + + + + + + + + + + + + + + +
border-collapse: collapse
Navigateur Moteur de rendu
Firefox Gecko
Internet Explorer Trident
Safari Webkit
Chrome Blink
Opera Blink
+``` + +### Résultat + +{{EmbedLiveSample('Exemples', 400, 300)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ------------------------ | -------------------- | +| {{SpecName('CSS2.1', 'tables.html#borders', 'border-collapse')}} | {{Spec2('CSS2.1')}} | Définition initiale. | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.border-collapse")}}

+{{Compat("css.properties.border-collapse")}} -

Voir aussi

+## Voir aussi - +- {{cssxref("border-spacing")}} +- {{cssxref("border-style")}} +- L'élément HTML {{HTMLElement("table")}} impacté `border-collapse`. -- cgit v1.2.3-54-g00ecf