Définir cellpadding et cellspacing en CSS?

Dans un tableau HTML, cellpadding et cellspacing peuvent être définis comme cellspacing :

 

Comment faire la même chose avec CSS?

Les bases

Pour contrôler “cellpadding” en CSS, vous pouvez simplement utiliser le padding sur les cellules de la table. Par exemple pour 10px de “cellpadding”:

 td { padding: 10px; } 

Pour “cellspacing”, vous pouvez appliquer la propriété CSS border-spacing à votre table. Par exemple pour 10px de “cellspacing”:

 table { border-spacing: 10px; border-collapse: separate; } 

Cette propriété permettra même un espacement horizontal et vertical distinct, ce que vous ne pouviez pas faire avec le “placement des cellules” à l’ancienne.

Problèmes dans IE < = 7

Cela fonctionnera dans presque tous les navigateurs les plus populaires, à l’exception d’Internet Explorer via Internet Explorer 7, où vous n’avez presque plus de chance. Je dis “presque” parce que ces navigateurs supportent toujours la propriété border-collapse , qui fusionne les bordures des cellules adjacentes. Si vous essayez d’éliminer la mise en cellule ( cellspacing="0" ), alors border-collapse:collapse devrait avoir le même effet: pas d’espace entre les cellules de la table. Ce support est bogué, cependant, car il ne remplace pas un cellspacing HTML existant dans l’élément table.

En bref: pour les navigateurs autres qu’Internet Explorer 5-7, border-spacing vous prend en charge. Pour Internet Explorer, si votre situation est juste (vous voulez 0 cellule de cellule et que votre table ne l’ait pas déjà définie), vous pouvez utiliser border-collapse:collapse .

 table { border-spacing: 0; border-collapse: collapse; } 

Remarque: Pour une vue d’ensemble des propriétés CSS que l’on peut appliquer aux tables et pour les navigateurs, consultez cette page fantastique sur Quirksmode .

Défaut

Le comportement par défaut du navigateur est équivalent à:

 table {border-collapse: collapse;} td {padding: 0px;} 

entrer la description de l'image ici

Rembourrage

Définit la quantité d’espace entre le contenu de la cellule et la paroi cellulaire

 table {border-collapse: collapse;} td {padding: 6px;} 

entrer la description de l'image ici

Espacement des cellules

Contrôle l’espace entre les cellules de la table

 table {border-spacing: 2px;} td {padding: 0px;} 

entrer la description de l'image ici

Tous les deux

 table {border-spacing: 2px;} td {padding: 6px;} 

entrer la description de l'image ici

Les deux (spécial)

 table {border-spacing: 8px 2px;} td {padding: 6px;} 

entrer la description de l'image ici

Remarque: S’il existe un border-spacing , cela indique que la propriété border-collapse de la table est separate .

Essayez vous-même!

Ici, vous pouvez trouver l’ancienne méthode HTML pour y parvenir.

 table { border-collapse: collapse; /* 'cellspacing' equivalent */ } table td, table th { padding: 0; /* 'cellpadding' equivalent */ } 

Définir des marges sur des cellules de tableau n’a aucun effet à ma connaissance. L’équivalent CSS vrai pour le cellspacing des cellspacing est l’ border-spacing , mais il ne fonctionne pas dans Internet Explorer.

Vous pouvez utiliser border-collapse: collapse pour définir de manière fiable l’espacement des cellules à 0, comme indiqué, mais pour toute autre valeur, je pense que la seule méthode inter-navigateur consiste à continuer à utiliser l’atsortingbut cellspacing .

Ce hack fonctionne pour Internet Explorer 6 et versions ultérieures, Google Chrome , Firefox et Opera :

 table { border-collapse: separate; border-spacing: 10px; /* cellspacing */ *border-collapse: expression('separate', cellSpacing = '10px'); } table td, table th { padding: 10px; /* cellpadding */ } 

La déclaration * concerne Internet Explorer 6 et 7 et les autres navigateurs l’ignoreront correctement.

expression('separate', cellSpacing = '10px') renvoie 'separate' , mais les deux instructions sont exécutées, car en JavaScript, vous pouvez transmettre plus d’arguments que prévu et toutes seront évaluées.

Pour ceux qui veulent une valeur de cellule non nulle, le CSS suivant a fonctionné pour moi, mais je ne peux le tester que dans Firefox. Voir le lien Quirksmode publié ailleurs pour plus de détails sur la compatibilité. Cela semble ne pas fonctionner avec les anciennes versions d’Internet Explorer.

 table { border-collapse: separate; border-spacing: 2px; } 

La solution simple à ce problème est la suivante:

 table { border: 1px solid #000000; border-collapse: collapse; border-spacing: 0px; } table td { padding: 8px 8px; } 

En outre, si vous souhaitez cellspacing="0" , n’oubliez pas d’append border-collapse: collapse dans la feuille de style de votre table .

Enveloppez le contenu de la cellule avec un div et vous pouvez faire tout ce que vous voulez, mais vous devez envelopper chaque cellule dans une colonne pour obtenir un effet uniforme. Par exemple, pour obtenir des marges gauche et droite plus larges:

Donc, le CSS sera,

 div.cellwidener { margin: 0px 15px 0px 15px; } td.tight { padding: 0px; } 
 
My content

Il suffit d’utiliser border-collapse: collapse pour votre table et padding pour th ou td

TBH. Pour tout ce qui se passe avec CSS, vous pouvez aussi utiliser cellpadding="0" cellspacing="0" car ils ne sont pas obsolètes …

Quiconque suggère des marges sur

n’a évidemment pas essayé.

Ce style est utilisé pour la réinitialisation complète des tableauxcellpadding , cellulepacing et frontières .

J’ai eu ce style dans mon fichier reset.css:

 table{ border:0; /* Replace border */ border-spacing: 0px; /* Replace cellspacing */ border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */ } table td{ padding: 0px;/*replace cellpadding*/ } 

D’après ce que j’ai compris des classifications du W3C, les

sont uniquement destinées à afficher des données.

Sur la base de cela, j’ai trouvé beaucoup plus facile de créer un

avec les arrière-plans et tout ça et d’avoir une table avec des données flottant dessus en utilisant position: absolute; et background: transparent;background: transparent;

Il fonctionne sur Chrome, IE (6 et versions ultérieures) et Mozilla (2 et versions ultérieures).

Les marges sont utilisées (ou signifient de toute façon) pour créer un espaceur entre les éléments du conteneur, comme

,

et

, pas

,

, ou . En l’utilisant pour autre chose que des éléments de conteneur, vous serez occupé à ajuster votre site Web pour les futures mises à jour du navigateur.

 table th,td { padding: 8px 2px; } table { border-collapse: separate; border-spacing: 2px; } 

Utilisez simplement les règles de remplissage CSS avec des données de table:

 td { padding: 20px; } 

Et pour l’espacement des frontières:

 table { border-spacing: 1px; border-collapse: collapse; } 

Cependant, il peut créer des problèmes dans les anciennes versions des navigateurs comme Internet Explorer en raison de la diff implémentation du modèle de boîte.

CSS:

 selector{ padding:0 0 10px 0; // Top left bottom right } 

Essaye ça:

 table { border-collapse: separate; border-spacing: 10px; } table td, table th { padding: 10px; } 

Ou essayez ceci:

 table { border-collapse: collapse; } table td, table th { padding: 10px; } 

J’ai utilisé !important après l’effondrement de la frontière comme

 border-collapse: collapse !important; 

et ça marche pour moi dans IE7. Il semble remplacer l’atsortingbut cellspacing.

 
Col 1 Col 2 Col 3
1 2 3

cell-padding peut être effectué en padding CSS tandis que cell-spacing peut être défini en définissant un border-spacing de border-spacing pour la table.

 table { border-spacing: 10px; } td { padding: 10px; } 

Le violon

 td { padding: npx; //for cellpadding margin: npx; //for cellspacing border-collapse: collapse; //for showing borders in a better shape. } 

Si la margin ne fonctionne pas, essayez de définir l’ display de tr sur block , puis la marge fonctionnera.

Pour les cellules de la table, le cadrage et le cellpadding sont obsolètes en HTML 5. Maintenant, pour Cellpacing, vous devez utiliser l’espacement des bordures. Et pour cellpadding, vous devez utiliser border-collapse.

Et assurez-vous de ne pas l’utiliser dans votre code HTML5. Essayez toujours d’utiliser ces valeurs dans un fichier CSS-3.

Vous pouvez facilement définir un remplissage à l’intérieur des cellules de la table à l’aide de la propriété de remplissage CSS. Il s’agit d’une méthode valide pour produire le même effet que l’atsortingbut cellpadding de la table.

 table, th, td { border: 1px solid #666; } table th, table td { padding: 10px; /* Apply cell padding */ } 
 < !DOCTYPE html>    Set Cellpadding in CSS   
Row First Name Last Name Email
1 Clark Kent clarkkent@mail.com
2 Peter Parker peterparker@mail.com
3 John Rambo johnrambo@mail.com
 table{border-spacing:4px; color: #000; background:#ccc; } td{padding-left:4px;} 

Dans un tableau HTML, cellpadding et cellspacing peuvent être définis comme cellspacing :

Pour Cell-Padding : Appelez simplement le padding simple des cellules td/th

EX:

 /******Call-Padding**********/ table { border-collapse: collapse; } td { border: 1px solid red; padding: 10px; } 
 
Head1 Head2 Head3 Head4
11 12 13 14
21 22 23 24
31 32 33 34
41 42 43 44

Vous pouvez simplement faire quelque chose comme ça dans votre CSS, en utilisant l’ border-spacing et le padding :

 table { border-collapse: collapse; } td, th { padding: 1em; border: 1px solid blue; } 
 
head_1 head_2 head_3 head_4
txt_1 txt_2 txt_3 txt_4

Que diriez-vous d’append le style directement à la table elle-même? C’est plutôt que d’utiliser une table dans votre CSS, ce qui est une mauvaise approche si vous avez plusieurs tables sur votre page:

 
Some Text