border-spacing |
Espacement de bordure |
| CSS2 |
|
Syntaxe
|
border-spacing: longueur|initial|inherit;
|
Paramètres
| Paramètre |
Description |
| longueur |
Ce paramètre permet d'indiquer l'espace entre la bordure et les cellules adjacentes. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer la distance entre les bordures et les cellules adjacentes.
Remarques
- Définition et rôle : La propriété border-spacing permet de définir l'espacement entre les bordures des cellules dans une table
HTML. Cette propriété est particulièrement utile pour les tables où border-collapse est défini sur separate, offrant
un contrôle précis sur l'apparence des bordures.
- Compatibilité avec border-collapse : La propriété border-spacing fonctionne uniquement lorsque border-collapse est défini sur separate.
Si border-collapse est réglé sur collapse, cette propriété n'a aucun effet, car les bordures des cellules sont fusionnées.
- Valeur par défaut : Par défaut, border-spacing est défini sur 0, ce qui signifie qu'il n'y a aucun espace entre les cellules de la table, et leurs bordures
apparaissent collées les unes aux autres (sauf si modifié).
- Impact visuel sur les tables : L'utilisation de border-spacing permet de créer des espaces visuels clairs entre les cellules d'une table, améliorant
la lisibilité des données et rendant la table plus esthétique, surtout lorsqu'elle est combinée avec des bordures ou des arrière-plans distincts.
- Support des unités dynamiques : En utilisant des unités dynamiques comme em ou %, l'espacement entre les cellules peut s'ajuster en fonction de la taille de la
table ou du contenu, ce qui est utile pour les mises en page réactives.
- Non-héritage de la propriété : border-spacing n'est pas une propriété héritée, mais elle s'applique à l'ensemble de la table si elle est spécifiée
directement sur l'élément <table>. Les cellules filles n'ont pas besoin de déclarer cette propriété.
- Compatibilité des navigateurs : border-spacing est bien pris en charge par les navigateurs modernes
(Google Chrome, Firefox, Edge,
Safari,...), mais certaines versions plus anciennes d'Internet Explorer
(notamment IE7 et moins) nécessitent des ajustements ou des alternatives.
Dernière mise à jour : Dimanche, le 20 décembre 2015
