Définir le remplissage et l'espacement des cellules en CSS?

Dans un tableau HTML, le cellpaddinget cellspacingpeut être défini comme ceci:

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

Comment faire la même chose en utilisant CSS?

Les bases

Pour contrôler le "cellpadding" en CSS, vous pouvez simplement l'utiliser paddingsur des cellules de tableau. Par exemple, pour 10 pixels de "cellpadding":

td { 
    padding: 10px;
}

Pour "cellspacing", vous pouvez appliquer la border-spacingpropriété CSS à votre table. Par exemple, pour 10 pixels de "cellule d'espacement":

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 un "espace cellulaire" à 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» car ces navigateurs prennent toujours en charge la border-collapsepropriété, qui fusionne les bordures des cellules de tableau adjacentes. Si vous essayez d'éliminer l'espacement des cellules (c'est-à-dire cellspacing="0") , cela border-collapse:collapsedevrait avoir le même effet: pas d'espace entre les cellules du tableau. Cette prise en charge est boguée, cependant, car elle ne remplace pas un cellspacingattribut HTML existant sur l'élément de table.

En bref: pour les navigateurs non Internet Explorer 5-7, border-spacingvous gère. Pour Internet Explorer, si votre situation est parfaite (vous voulez 0 espace de cellule et votre table ne l'a pas déjà défini), vous pouvez utiliser border-collapse:collapse.

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

Remarque: Pour un excellent aperçu des propriétés CSS que l'on peut appliquer aux tableaux et pour quels navigateurs, consultez cette fantastique page Quirksmode .

Défaut

Le comportement par défaut du navigateur équivaut à:

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

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;}

Espacement cellulaire

Contrôle l'espace entre les cellules du tableau

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

Tous les deux

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

Les deux (spécial)

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

Remarque: S'il est border-spacingdéfini, cela indique que la border-collapsepropriété de la table estseparate .

Essayez-le vous-même!

Ici vous pouvez trouver l'ancienne HTML d' y parvenir.

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

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

La définition de marges sur les cellules d'un tableau n'a pas vraiment d'effet à ma connaissance. Le véritable équivalent CSS pour cellspacingestborder-spacing - mais cela ne fonctionne pas dans Internet Explorer.

Vous pouvez utiliser border-collapse: collapsepour définir de manière fiable l'espacement des cellules à 0, comme mentionné, mais pour toute autre valeur, je pense que la seule façon inter-navigateur est de continuer à utiliser l' cellspacingattribut.

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 passer plus d'arguments que prévu et tous seront évalués.

Pour ceux qui veulent une valeur d'espacement des cellules 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 les détails de compatibilité. Il semble que cela ne fonctionne pas avec les anciennes versions d'Internet Explorer.

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

La solution simple à ce problème est:

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

De plus, si vous le souhaitez cellspacing="0", n'oubliez pas d'ajouter border-collapse: collapsevotre tablefeuille de style.

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:

Ainsi, 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.

Utilisez simplement border-collapse: collapsepour votre table, et paddingpour thou td.

Ce style est destiné à une réinitialisation complète des tableaux - remplissage de cellule , espacement des cellules et bordures .

J'avais 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 */
}

TBH. Pour tous les fannings autour de CSS, vous pourriez 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.

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

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

td { 
    padding: 20px;
}

Et pour l'espacement des bordures:

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 l'implémentation différente du modèle de boîte.

D'après ce que je comprends des classifications du W3C, les <table>s sont destinés à afficher des données «uniquement».

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

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

Les marges sont utilisées (ou entend toute façon) pour créer un espacement entre des éléments de récipient, comme <table>, <div>et <form>non <tr>, <td>, <span>ou <input>. L'utiliser pour autre chose que des éléments de conteneur vous gardera occupé à ajuster votre site Web pour les futures mises à jour du navigateur.

CSS:

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

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

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>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</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 distincte, ce qui est 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>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

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é !importantaprès l'effondrement de la frontière comme

border-collapse: collapse !important;

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

<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-paddingpeut être donné par paddingen CSS tandis que cell-spacingpeut être défini en définissant border-spacingune table.

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

Violon .

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

Si marginne fonctionne pas, essayez de définir displaydes trà blocket la marge fonctionnera.

Pour les tableaux, l'espacement des cellules et le remplissage des cellules sont obsolètes dans HTML 5.

Maintenant, pour l'espacement des cellules, vous devez utiliser l'espacement des bordures. Et pour le rembourrage cellulaire, 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.

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

Dans un tableau HTML, le cellpaddinget cellspacingpeut être défini comme ceci:

Pour le rembourrage cellulaire :

Appelez simplement une td/thcellule simple 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 l'espacement des cellules

Appelez simplement simple table border-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 .

Vous pouvez simplement faire quelque chose comme ça dans votre CSS, en utilisant border-spacinget 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>

Que diriez-vous d'ajouter le style directement à la table elle-même? C'est au lieu d'utiliser tabledans votre CSS, ce qui est une mauvaise approche si vous avez plusieurs tables sur votre page:

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

Je suggère cela et toutes les cellules du tableau particulier sont effectuées.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

Vous pouvez vérifier le code ci-dessous juste créer un index.htmlet l'exécuter.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

PRODUCTION :