1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: border-spacing
slug: Web/CSS/border-spacing
tags:
- CSS
- Propriété
- Reference
- Tableaux CSS
translation_of: Web/CSS/border-spacing
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>border-spacing</code></strong> définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque {{cssxref("border-collapse")}} vaut <code>separate</code>). 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.</p>
<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>La valeur de <code>border-spacing</code> 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 <code>border-spacing</code> approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left).</p>
<div class="note">
<p><strong>Note</strong> : La propriété <code>border-spacing</code> équivaut à l'attribut déprécié <code>cellspacing</code> de l'élément <code><table></code>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css no-line-numbers">/* Une valeur de longueur */
/* Type <length> */
border-spacing: 2px;
/* La première valeur indique */
/* l'espacement horizontal et */
/* la seconde le vertical. <em>*/</em>
border-spacing: 1cm 2em;
/* Valeurs globales */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;
</pre>
<p>La propriété <code>border-spacing</code> peut être définie avec une ou deux valeurs :</p>
<ul>
<li>Avec une valeur de type {{cssxref("<length>")}}, la valeur est utilisée pour l'espacement vertical ainsi que pour l'espacement horizontal.</li>
<li>Avec deux valeurs de type {{cssxref("<length>")}}, la première définit l'espacement horizontal (entre les colonnes) et la seconde définit l'espacement vertical (entre les lignes).</li>
</ul>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>length</code></dt>
<dd>Une valeur de longueur ({{cssxref("<length>")}} qui décrit l'espacement entre les cellules.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<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('CSS2.1', 'tables.html#separated-borders', 'border-spacing')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.border-spacing")}}</p>
<h2 id="Voir_auss">Voir auss</h2>
<ul>
<li>{{cssxref("border-collapse")}}</li>
<li>{{cssxref("border-style")}}</li>
<li>L'élément HTML {{htmlelement("table")}}</li>
</ul>
|
