html - quoi - css table




Définir cellpadding et cellpacing en CSS? (18)

Défaut

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

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 des cellules

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: Si un border-spacing est défini, cela signifie que la propriété de décompression de la border-collapse du tableau est separate .

Essayez vous-même!

Here vous pouvez trouver le vieux moyen html d'y parvenir.

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

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

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


CSS:

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

Ce style est conçu pour une réinitialisation complète des tableaux - cellpadding , cellpacing et border .

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 <table> sont destinées à afficher des données "uniquement".

Basé sur cela, j'ai trouvé beaucoup plus facile de créer un <div> 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; ...

Cela fonctionne sur Chrome, IE (6 et plus tard) et Mozilla (2 et plus tard).

Les marges sont utilisées (ou supposées de toute façon) pour créer un espaceur entre les éléments de conteneur, tels que <table> , <div> et <form> , et non <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.


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


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 IE. En fait, je n'ai testé cela qu'avec IE, car c'est tout ce que nous sommes autorisés à utiliser au travail.


HTML 5. Pour Cellpacing, vous devez utiliser border-spacing 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 le fichier CSS-3.


J'ai utilisé !important aprè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.


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

Le fait de définir des marges sur les cellules d'un tableau n'a pas vraiment d'effet à ma connaissance. L'équivalent CSS réel pour l' cellspacing des cellspacing est l' 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 la seule façon de cellspacing les navigateurs consiste à continuer à utiliser l'attribut cellspacing .


Pourquoi ne pas ajouter le style directement à la table? Cela remplace l'utilisation de table dans 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>

TBH. Pour tout le plaisir avec les 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.


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

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>


Les bases

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

td { 
    padding: 10px;
}

Pour "cellspacing", vous pouvez appliquer la propriété CSS border-spacing à votre tableau. Par exemple, pour 10 pixels de "cellulespacing":

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 liés à Internet Explorer <= 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 propriété border-collapse , qui fusionne les bordures des cellules de tableau adjacentes. Si vous essayez d'éliminer Cellpacing ( cellspacing="0" ), alors border-collapse:collapse devrait avoir le même effet: pas d'espace entre les cellules du tableau. Cette prise en charge est toutefois cellspacing , car elle ne remplace pas un cellspacing HTML existant dans la table cellspacing de l’élément table.

En bref: pour les navigateurs autres qu'Internet Explorer 5-7, l' 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 cette page fantastique Quirksmode .


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

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

<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 obtenu en padding du CSS, tandis que cell-spacing peut être défini en définissant l' border-spacing pour le tableau.

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

Fiddle .


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

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 régler l' display de tr sur block , puis la marge fonctionnera.





alignment