From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/border-spacing/index.html | 137 +++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 files/fr/web/css/border-spacing/index.html (limited to 'files/fr/web/css/border-spacing') diff --git a/files/fr/web/css/border-spacing/index.html b/files/fr/web/css/border-spacing/index.html new file mode 100644 index 0000000000..b40da3aece --- /dev/null +++ b/files/fr/web/css/border-spacing/index.html @@ -0,0 +1,137 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - Propriété + - Reference + - Tableaux CSS +translation_of: Web/CSS/border-spacing +--- +
{{CSSRef}}
+ +

La propriété border-spacing définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque {{cssxref("border-collapse")}} vaut separate). Cette propriété est équivalente à l'attribut HTML déprécié {{htmlattrxref("cellspacing","table")}} mais une deuxième valeur peut être utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.

+ +
{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
+ + + +

La valeur de border-spacing est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du border-spacing approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left).

+ +
+

Note : La propriété border-spacing équivaut à l'attribut déprécié cellspacing de l'élément <table>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.

+
+ +

Syntaxe

+ +
/* Une valeur de longueur */
+/* Type <length>         */
+border-spacing: 2px;
+
+/* La première valeur indique */
+/* l'espacement horizontal et */
+/* la seconde le vertical.    */
+border-spacing: 1cm 2em;
+
+/* Valeurs globales */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;
+
+ +

La propriété border-spacing peut être définie avec une ou deux valeurs :

+ + + +

Valeurs

+ +
+
length
+
Une valeur de longueur ({{cssxref("<length>")}} qui décrit l'espacement entre les cellules.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
table {
+  border-collapse: separate;
+  border: 1px solid #000;
+}
+
+td {
+  border: 1px solid #000;
+  padding: 5px;
+}
+
+.unevaleur {
+  border-spacing: 5px;
+}
+
+.deuxvaleurs {
+  border-spacing: 5px 10px;
+}
+ +

HTML

+ +
<table class="unevaleur">
+  <tr>
+    <td>Ces cellules</td>
+    <td>sont séparées par 5px</td>
+    <td>tout autour.</td>
+  </tr>
+</table>
+<br />
+<table class="deuxvaleurs">
+  <tr>
+    <td>Ces cellules</td>
+    <td>sont séparées par 5px d'écart horizontal</td>
+    <td>et 10px d'écart vertical.</td>
+  </tr>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir auss

+ + -- cgit v1.2.3-54-g00ecf