La propriété CSS border-spacing

La propriété CSS border-spacing définit la distance entre les bordures des cellules de tableau voisines. C'est l'équivalent CSS de l'ancien attribut HTML cellspacing, mais avec davantage de contrôle : vous pouvez définir les espaces horizontaux et verticaux indépendamment.

Cette page explique ce que fait border-spacing, dans quels cas elle prend effet, les valeurs qu'elle accepte, et présente plusieurs exemples exécutables.

Quand border-spacing s'applique

border-spacing ne fonctionne que dans le modèle de bordures séparées — c'est-à-dire lorsque border-collapse est défini sur separate (la valeur par défaut). Dans ce modèle, chaque cellule conserve sa propre bordure, laissant ainsi un espace réel entre les cellules que la propriété peut contrôler.

Si vous passez au modèle de fusion (border-collapse: collapse), les bordures adjacentes fusionnent en une seule bordure partagée et il n'y a plus d'espace à dimensionner, donc border-spacing est ignorée. Si l'espacement semble n'avoir aucun effet, vérifiez que border-collapse n'est pas défini sur collapse.

Valeurs et syntaxe

border-spacing accepte une ou deux valeurs de longueur :

Une valeur — applique le même espacement horizontalement et verticalement (par exemple border-spacing: 20px).
Deux valeurs — la première définit l'espacement horizontal, la seconde l'espacement vertical (par exemple border-spacing: 20px 30px).

Les longueurs peuvent utiliser n'importe quelle unité CSS (px, em, rem, etc.). Les valeurs négatives ne sont pas autorisées, et les pourcentages ne sont pas acceptés.

Valeur initiale	0
S'applique à	Les éléments tableau et tableau en ligne.
Hérité	Non
Animable	Oui. La valeur d'espacement est animable.
Version	CSS2
Syntaxe DOM	object.style.borderSpacing = "10px";

Syntaxe

Syntaxe de la propriété CSS border-spacing

border-spacing: length | initial | inherit;

Exemple de la propriété border-spacing avec une seule valeur :

Exemple de la propriété CSS border-spacing avec une seule valeur

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      .table {
        border-collapse: separate;
        border-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Example of border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

Résultat

Voici un autre exemple qui utilise deux valeurs. La première valeur définit l'espacement horizontal, et la seconde l'espacement vertical, de sorte que l'espace entre les colonnes diffère de celui entre les lignes.

Exemple de la propriété border-spacing avec deux valeurs :

Exemple de la propriété CSS border-spacing avec deux valeurs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-spacing: 20px 30px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez vous-même »

Ajoutons maintenant un style à l'exemple de tableau ci-dessus. Par exemple, ajoutons background-color. Cette propriété définit la couleur d'arrière-plan d'un élément.

Exemple d'utilisation de la propriété border-spacing avec la propriété background-color :

Exemple de la propriété CSS border-spacing avec la propriété background-color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      .table {
        border-collapse: separate;
        border-spacing: 20px;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h1>Example of border-spacing: 20px;</h1>
    <table class="table">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
length	Définit la distance entre les cellules en px, em, etc.	Essayer »
initial	Définit cette propriété à sa valeur par défaut.	Essayer »
inherit	Hérite cette propriété de son élément parent.

Propriétés associées

border-collapse — détermine si les bordures des cellules sont séparées (pour que border-spacing fonctionne) ou fusionnées.
empty-cells — contrôle si les bordures et les arrière-plans sont dessinés autour des cellules vides dans le modèle séparé.
border-color — définit la couleur des bordures de cellules que border-spacing écarte.
HTML tables — le balisage auquel ces styles s'appliquent.

Pratique

Quelle est la fonction de la propriété 'border-spacing' en CSS ?

Elle définit les distances entre les bordures des cellules adjacentes dans les tableaux CSS.Elle définit la largeur de la bordure d'un élément.Elle représente la couleur de la bordure d'un élément.Elle désigne le style de la bordure d'un élément.Elle peut accepter deux valeurs pour contrôler l'espacement horizontal et vertical.