post 06 of 32 · 21 March 2007 · written in French
The CSS equivalent of cellpadding and cellspacing
Equivalent CSS de cellpadding et cellspacing
How to drop the HTML cellpadding and cellspacing attributes for CSS. Padding on the cells replaces cellpadding. For spacing, border-collapse: collapse removes it in every browser, while border-spacing sets an exact gap but doesn't work in Internet Explorer.
Tout d’abord, ce qu’il faut noter, c’est que les attributs cellpadding et cellspacing ne sont pas dépréciés en HTML 4, et même pas en XHTML 1.1.
Cela vient sans doute du fait qu’il n’y avait pas encore d’équivalent à ces propriétés en CSS1 lorsque le HTML 4 a été rédigé.
Depuis le CSS2, vous pouvez vous passer de ces propriétés, et faire votre mise en forme uniquement en CSS :-D
Pour le cellpadding, c’est assez simple, il faut attribuer la propriété padding à toutes les cellules du tableau.
| One | Two | Three |
| Four | Five | Six |
table#monTableau td
{
padding:0px;
}
Pour cellspacing, en revanche, c’est un (tout) petit peu plus complexe.
Si vous voulez supprimer le cellspacing, il faut utiliser border-collapse. Cela fonctionne avec tous les navigateurs.
| One | Two | Three |
| Four | Five | Six |
table#monTableau
{
border-collapse:collapse;
}
Enfin, si vous voulez mettre un espace défini entre chaque cellule, il faut utiliser border-spacing. En revanche, cela ne marchera pas avec Internet Explorer.
| One | Two | Three |
| Four | Five | Six |
table#monTableau
{
border-spacing: 10px;
}
Et voilà, c’est tout pour aujourd’hui ;-)