web-dev-qa-db-fra.com

Définir cellpadding et cellpacing en CSS?

Dans une table HTML, les variables cellpadding et cellspacing peuvent être définies comme suit:

<table cellspacing="1" cellpadding="1">

Comment peut-on accomplir la même chose avec CSS?

htmlcsshtml-tablealignment
3169
kokos

Bases

Pour contrôler "cellpadding" en CSS, vous pouvez simplement utiliser padding sur les cellules de tableau. Par exemple. pour 10px de "cellpadding":

td { 
    padding: 10px;
}

Pour "cellulespacing", vous pouvez appliquer la propriété border-spacing CSS à 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 séparé, ce que vous ne pourriez pas faire avec le "cellpacing" à l'ancienne.

Problèmes dans IE <= 7

Cela fonctionnera dans presque tous les navigateurs populaires, à l'exception d'Internet Explorer jusqu'à Internet Explorer 7, où vous n'avez presque pas de chance. Je dis "presque" parce que ces navigateurs supportent toujours la propriété border-collapse, qui fusionne les bordures des cellules de tableau adjacentes. Si vous essayez d'éliminer le espacement des cellules (c'est-à-dire cellspacing="0"), alors border-collapse:collapse devrait avoir le même effet: aucun espace entre les cellules du tableau. Cependant, cette prise en charge est problématique car elle ne remplace pas l'attribut HTML cellspacing HTML existant sur l'élément de table.

En bref: pour les navigateurs autres qu'Internet Explorer 5-7, border-spacing vous gère. Pour Internet Explorer, si votre situation est juste (vous voulez 0 cellulespacing et votre table ne l'a pas déjà définie), vous pouvez utiliser border-collapse:collapse.

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

Remarque: pour un bon aperçu des propriétés CSS que vous pouvez appliquer aux tableaux et pour quels navigateurs, consultez ceci fantastique page Quirksmode .

3452
Eric Nguyen

Default

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

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

Enter image description here

Cellpadding

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

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

Enter image description here

Cellspacing

Contrôle l'espace entre les cellules du tableau

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

Enter image description here

Tous les deux

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

Enter image description here

Les deux (spécial)

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

Enter image description here

Remarque: Si border-spacing est défini, il indique que la propriété border-collapse de la table est separate.

Essayez vous-même!

Ici vous pouvez trouver l’ancien moyen HTML d’y parvenir.

914
user669677
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
333
Pup

Le fait de définir des marges sur les cellules d'un tableau n'a pas vraiment d'effet, à ma connaissance. Le véritable équivalent CSS pour cellspacing est border-spacing - mais cela ne fonctionne pas dans Internet Explorer.

Vous pouvez utiliser border-collapse: collapse pour définir de manière fiable l'espacement des cellules sur 0, comme indiqué, mais pour toute autre valeur, je pense que le seul moyen d'utiliser plusieurs navigateurs consiste à continuer à utiliser l'attribut cellspacing.

112
Will Prescott

Ce hack fonctionne pour Internet Explorer 6 et les 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. En JavaScript, vous pouvez transmettre plus d'arguments que prévu et tous seront évalués.

95
Vitalii Fedorenko

Pour ceux qui veulent une valeur de cellule pas différente de zéro, le CSS suivant a fonctionné pour moi, mais je ne peux le tester que dans Firefox.

Voir le lien Quirksmodeposté ailleurs pour plus de détails sur la compatibilité. Il semble que cela ne fonctionne peut-être pas avec les anciennes versions d'Internet Explorer.

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

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;
}
53
George Filippakos

Aussi, si vous voulez cellspacing="0", n'oubliez pas d'ajouter border-collapse: collapse dans votre feuille de style table.

47
mat

Enveloppez le contenu de la cellule avec une div et vous pouvez faire 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;
}
<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Oui, c'est un problème. Oui, cela fonctionne avec Internet Explorer. En fait, je n'ai testé cela qu'avec Internet Explorer, car c'est tout ce que nous sommes autorisés à utiliser au travail.

42
Robert White

Utilisez simplement border-collapse: collapse pour votre table et padding pour th ou td.

23
Dan

Ce style est pour réinitialisation complète pour les tableaux - cellpadding, cellulespacing et bordures.

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 */
}
21
Elad Shechter

TBH. Pour tout le plaisir avec CSS, vous pouvez aussi bien utiliser cellpadding="0"cellspacing="0" car ils ne sont pas obsolètes ...

Quiconque suggère des marges sur <td> n'a évidemment pas essayé cela.

21
corrector
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}
18
Abhishek Singh

tilisez simplement les règles de remplissage CSS avec les données de la table:

td { 
    padding: 20px;
}

Et pour l'espacement des frontières:

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

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

17
suraj rawat

D'après ce que j'ai compris des classifications du W3C, les <table>s sont conçus pour afficher des données "uniquement".

Sur la base de cela, j'ai trouvé beaucoup plus facile de créer un <div> avec les arrière-plans et tout cela, et d'avoir une table avec des données flottant dessus en utilisant position: absolute; et background: transparent;...

Cela fonctionne sur Chrome, Internet Explorer (version 6 et ultérieure) et Mozilla Firefox (version 2 et ultérieure).

Les marges sont utilisées (ou supposées de toute façon) pour créer un espaceur entre les éléments du conteneur, comme <table>, <div> et <form>, pas <tr>, <td>, <span> ou <input>. Son utilisation pour autre chose que des éléments de conteneur vous obligera à ajuster votre site Web pour les mises à jour futures du navigateur.

16
RolanDecoy

CSS:

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

Vous pouvez facilement définir un remplissage à l'intérieur des cellules du tableau à l'aide de la propriété de remplissage CSS. C'est un moyen valable de produire le même effet que l'attribut cellpadding de la table.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

De même, vous pouvez utiliser la propriété CSS border-spacing pour appliquer l'espacement entre les bordures de cellules de tableau adjacentes, comme l'attribut cellspacing. Cependant, afin de travailler l'espacement des bordures, la valeur de la propriété border-collapse doit être séparée, ce qui est la valeur par défaut.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>
10
Rafiqul Islam

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;
}
10
Falguni Panchal

J'ai utilisé !important après l'effondrement de la bordure, comme

border-collapse: collapse !important;

et cela fonctionne pour moi dans IE7. Il semble remplacer l'attribut cellspacing.

9
Håkan Nilsson
<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding peut être donné par padding en CSS alors que cell-spacing peut être défini en définissant border-spacing pour la table.

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

violon .

8
Fahad Uddin
td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

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

6
Majid Sadr

Pour les tableaux, cellpacing et cellpadding sont obsolètes en HTML 5.

Maintenant, pour l'espacement des cellules, vous devez utiliser un espacement de bordure. 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.

5
Pushp Singh
table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}
4
user6781634

Dans une table HTML, les variables cellpadding et cellspacing peuvent être définies comme suit:

Pour remplissage de cellules :

Il suffit d'appeler simple td/th cellule padding.

Exemple: 

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

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

td {
  border: 1px solid red;
  padding: 10px;
}

Pour espacement des cellules

Il suffit d'appeler simple tableborder-spacing

Exemple: 

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}
<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>
/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

Plus de style de tableau par lien source CSS ici, vous obtenez plus de style de tableau par CSS .

3
MD Ashik

Vous pouvez simplement faire quelque chose comme ceci dans votre CSS, en utilisant border-spacing et padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>
3
Alireza

Pourquoi ne pas ajouter le style directement à la table? Ceci remplace l'utilisation de table dans votre CSS, qui est une approche BAD si vous avez plusieurs tableaux sur votre page:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>
0
vapcguy