Comment définir les cellpadding et cellspacing en CSS ?
Il est possible de définir les propriétés cellpadding et cellspacing en CSS. Décryptage.
Les tableaux HTML possèdent des attributs permettant de paramétrer la taille des marges à l'intérieur et entre les cellules. La propriété cellpadding permet de paramétrer les marges à l'intérieur de la cellule entre le contenu et les bords. La propriété cellspacing gère les marges entre les cellules (à voir aussi l'astuce : Comment appliquer les CSS d'une page web au contenu d'une iframe ?).
Exemple de table :
<table cellpadding=2 cellspacing=2> </table>
Il est possible de définir également ces propriétés en CSS. Pour imiter l'attribut HTML cellpadding, il suffit d'utiliser la propriété padding sur les cellules :
table tr td
{
padding: 2; //Marge à l'intérieur des cellules, équivalent de cellpadding
}
Pour l'attribut cellspacing, l'équivalent en CSS est la propriété CSS border-spacing. Elle permet de définir les espaces entre les cellules. Elle a par contre le défaut de ne pas être compatible avec la version 7 d'Internet Explorer ainsi qu'avec les versions antérieures.
Si vous souhaitez fixer la valeur 0 pour l'espacement entre les cellules, vous pouvez également utiliser la propriété border-collapse qui est compatible avec tous les navigateurs. Il suffit de fixer sa valeur à collapse :
table
{
border-spacing : 0;
border-collapse : collapse;
}