border-spacing

La propriété border-spacing définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque le modèle des bordures séparées est utilisée). Cette propriété est équivalente à l'attribut HTML cellspacing mais une deuxième valeur peut être utilisée pour avoir un espacement vertical différent de l'espacement horizontal.

La valeur de border-spacing est également utilisée pour le bord extérieur du tableau où la distance entre la bordure du tableau et la première/dernière ligne/colonne est la somme des border-spacing et du padding.

Cette propriété ne s'applique que lorsque border-collapse vaut separate.

Syntaxe

/* Un valeur de longueur */
/* Type <length>         */
border-spacing: 2px;

/* La première valeur indique */
/* l'espacement horizontal et */
/* la seconde le vertical.    */
border-spacing: 1% 2em;

border-spacing: inherit;

Valeurs

length

Une valeur de longueur (<length> qui décrit l'espacement entre les cellules. S'il y a une seule valeur, l'espacement utilisé sera le même pour l'espace vertical et horizontale. Si deux valeurs sont utilisées, la première concernera l'espace horizontal et la seconde valeur l'espace vertical.

inherit

Un mot-clé qui indique qu'on utilise la valeur calculée de border-spacing de l'élément parent.

Syntaxe formelle

<length> <length>?

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

Spécifications

Compatibilité des navigateurs