Propriété CSS border-spacing
La propriété CSS border-spacing définit la distance entre les bordures des cellules de tableau voisines. Cette propriété ne s'applique que lorsque le modèle border-collapse est défini sur separate. Cette propriété sera ignorée si le modèle de bordures effacées (collapsing border model) est utilisé.
La propriété border-spacing s'applique aux éléments HTML rendus avec le modèle de bordures séparées. Elle détermine l'espacement entre les cellules, car les bordures distinctes des cellules du tableau rendues par ce modèle ne sont pas partagées.
La propriété border-spacing peut être définie avec une ou deux valeurs de longueur. Si deux valeurs sont fournies, la première définit l'espacement horizontal et la seconde définit l'espacement vertical. Si une seule valeur est fournie, elle définit à la fois l'espacement horizontal et vertical à cette valeur. Les valeurs négatives ne sont pas autorisées.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Les éléments table et les tableaux en ligne. |
| Héritée | Non |
| Animable | Oui. La quantité 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>Résultat
Voici un autre exemple avec deux valeurs. La première valeur définit l'espacement horizontal et la seconde définit l'espacement vertical.
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>Attributons maintenant un style à l'exemple de tableau ci-dessus. Par exemple, ajoutons background-color. Cette propriété définit la couleur de fond 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>Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| length | Spécifie la distance entre les cellules en px, em, etc. | Tester » |
| initial | Définit cette propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite cette propriété de son élément parent. |
Pratique
Quelle est la fonction de la propriété 'border-spacing' en CSS ?