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 border-collapse vaut separate). Cette propriété est équivalente à l'attribut HTML déprécié cellspacing mais une deuxième valeur peut être utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.

Exemple interactif

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 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

css
/* 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 :

  • Avec une valeur de type <length>, la valeur est utilisée pour l'espacement vertical ainsi que pour l'espacement horizontal.
  • Avec deux valeurs de type <length>, la première définit l'espacement horizontal (entre les colonnes) et la seconde définit l'espacement vertical (entre les lignes).

Valeurs

length

Une valeur de longueur (<length> qui décrit l'espacement entre les cellules.

Définition formelle

Valeur initiale0
Applicabilitédes éléments table and inline-table
Héritéeoui
Valeur calculéedeux longueurs absolues
Type d'animationdiscrète

Syntaxe formelle

border-spacing = 
  <length>{1,2}

Exemples

CSS

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

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

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
# separated-borders

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi