Propriété CSS border-spacing

❮ Précédent Suivant ❯

La propriété CSS border-spacing est utilisée pour définir la distance entre les bordures des cellules de table avoisinants. Cette propriété n'est appliquée que le border-collapse est séparé. Si on a utilisé un modèle de bordure éffondrée, cette propriété est ignorée.

La propriété border-spacing peut être spécifiée en utilisant une ou deux valeurs de longueur. S'il y a deux valeurs donnée, la première définit l'espacement horizontal, et la deuxième définit l'espacement vértical. S'il y a seulement une valeur donnée, elle définit les espacements horizontal et vertical à la valeur spécifiée. Les valeurs négatives ne sont pas permises.

Valeur initiale	0
Appliquée à	Le tableau et les éléments en ligne des tableaux.
Héritée	Non
Animable	Oui. Le nombre d'espacement est animable.
Version	CSS2
Syntaxe DOM	object.style.borderSpacing = "10px";

Syntaxe

border-spacing: length | initial | inherit;

Voyons un exemple, qui a une seule valeur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table, td, th {
      border: 1px solid black;
      }
      .table {
      border-collapse: separate;
      border-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Prénom</th>
        <th>Nom</th>
      </tr>
      <tr>
        <td>Marie</td>
        <td>Legrande</td>
      </tr>
      <tr>
        <td>Michel</td>
        <td>Larousse</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Voici un autre exemple, qui a deux valeurs.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>  
      table {
      border-spacing: 20px 30px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Titre</th>
          <th>Titre</th>
          <th>Titre</th>
          <th>Titre</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez-vous-même!

Maintenant, nous allons donner un style à ce table. Par exemple, ajoutons background-color, qui définit le couleur de fond de l'élément.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table, td, th {
      border: 1px solid black;
      }
      .table {
      border-collapse: separate;
      border-spacing: 20px;
      background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Prénom</th>
        <th>Nom</th>
      </tr>
      <tr>
        <td>Marie</td>
        <td>Legrande</td>
      </tr>
      <tr>
        <td>Michel</td>
        <td>Larousse</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
length	Spécifie la distance entre les cellules en px, em, ou %.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.