Impostare cellpad e cellpacing in CSS?

In una tabella HTML, cellpaddinge cellspacingpuò essere impostato in questo modo:

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

Come si può ottenere lo stesso risultato usando i CSS?

Nozioni di base

Per controllare il "cellpadding" nei CSS, puoi semplicemente usare paddingsulle celle della tabella. Ad esempio per 10px di "cellpadding":

td { 
    padding: 10px;
}

Per "cellpacing", puoi applicare la border-spacingproprietà CSS alla tua tabella. Ad esempio per 10px di "cellpacing":

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

Questa proprietà consentirà persino una spaziatura orizzontale e verticale separata, cosa che non potresti fare con la "spaziatura cellulare" della vecchia scuola.

Problemi in IE <= 7

Funzionerà in quasi tutti i browser più diffusi tranne Internet Explorer fino a Internet Explorer 7, dove sei quasi sfortunato. Dico "quasi" perché questi browser supportano ancora la border-collapseproprietà, che unisce i bordi delle celle della tabella adiacenti. Se stai cercando di eliminare la spaziatura cellulare (ovvero, cellspacing="0") , allora border-collapse:collapsedovrebbe avere lo stesso effetto: nessuno spazio tra le celle della tabella. Questo supporto è errato, tuttavia, poiché non sovrascrive un cellspacingattributo HTML esistente sull'elemento tabella.

In breve: per i browser non Internet Explorer 5-7, border-spacingti gestisce. Per Internet Explorer, se la tua situazione è giusta (vuoi 0 cellpacing e la tua tabella non lo ha già definito), puoi usare border-collapse:collapse.

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

Nota: per una fantastica panoramica delle proprietà CSS che è possibile applicare alle tabelle e per quali browser, vedere questa fantastica pagina Quirksmode .

Predefinito

Il comportamento predefinito del browser è equivalente a:

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

cELLPADDING

Imposta la quantità di spazio tra il contenuto della cella e la parete della cella

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

cellspacing

Controlla lo spazio tra le celle della tabella

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

Tutti e due

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

Entrambi (speciali)

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

Nota: se è border-spacingimpostato, indica che la border-collapseproprietà della tabella è separate.

Prova tu stesso!

Qui puoi trovare il vecchio modo HTML per raggiungere questo obiettivo.

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

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

L'impostazione dei margini sulle celle della tabella non ha alcun effetto per quanto ne so. Il vero equivalente CSS per cellspacingèborder-spacing - ma non funziona in Internet Explorer.

È possibile utilizzare border-collapse: collapseper impostare in modo affidabile la spaziatura delle celle su 0, come indicato, ma per qualsiasi altro valore penso che l'unico modo tra browser sia continuare a utilizzare l' cellspacingattributo.

Questo trucco funziona per Internet Explorer 6 e versioni successive, Google Chrome , Firefox e Opera :

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

table td, table th {
    padding: 10px; /* cellpadding */
}

La *dichiarazione è per Internet Explorer 6 e 7 e altri browser la ignoreranno correttamente.

expression('separate', cellSpacing = '10px')restituisce 'separate', ma vengono eseguite entrambe le istruzioni, poiché in JavaScript è possibile passare più argomenti del previsto e tutti verranno valutati.

Per coloro che desiderano un valore di spaziatura cellulare diverso da zero, il seguente CSS ha funzionato per me, ma sono in grado di testarlo solo in Firefox.

Vedi il link Quirksmode pubblicato altrove per i dettagli di compatibilità. Sembra che potrebbe non funzionare con le versioni precedenti di Internet Explorer.

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

La semplice soluzione a questo problema è:

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

Inoltre, se lo desideri cellspacing="0", non dimenticare di aggiungere border-collapse: collapseil tablefoglio di stile.

Avvolgi il contenuto della cella con un div e puoi fare tutto ciò che vuoi, ma devi avvolgere ogni cella in una colonna per ottenere un effetto uniforme. Ad esempio, per ottenere margini più ampi a sinistra e a destra:

Quindi il CSS sarà,

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>

Sì, è una seccatura. Sì, funziona con Internet Explorer. In realtà, l'ho testato solo con Internet Explorer, perché è tutto ciò che ci è permesso usare al lavoro.

Basta usare border-collapse: collapseper il tuo tavolo e paddingper tho td.

Questo stile è per il ripristino completo delle tabelle : riempimento di celle , spaziatura cellulare e bordi .

Ho avuto questo stile nel mio file 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. Per quanto riguarda la sparizione con i CSS, potresti anche usare solo cellpadding="0" cellspacing="0"perché non sono deprecati ...

Qualcun altro che ha suggerito margini su <td>ovviamente non ha provato questo.

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

Usa semplicemente le regole di riempimento CSS con i dati della tabella:

td { 
    padding: 20px;
}

E per la spaziatura dei bordi:

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

Tuttavia, può creare problemi nella versione precedente di browser come Internet Explorer a causa dell'implementazione diff del modello box.

Da quanto ho capito dalle classificazioni del W3C è che <table>s sono pensati per visualizzare i dati "solo".

Sulla base di ciò, ho trovato molto più facile creare un <div>con gli sfondi e tutto il resto e avere una tabella con i dati fluttuanti su di esso usando position: absolute;e background: transparent;...

Funziona su Chrome, Internet Explorer (6 e versioni successive) e Mozilla Firefox (2 e versioni successive).

I margini sono utilizzati (o comunque destinate) per creare un distanziatore tra elementi contenitore, come <table>, <div>e <form>, non <tr>, <td>, <span>o <input>. Usarlo per qualsiasi cosa diversa dagli elementi contenitore ti terrà occupato ad adattare il tuo sito Web per futuri aggiornamenti del browser.

CSS:

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

Puoi facilmente impostare il riempimento all'interno delle celle della tabella usando la proprietà di riempimento CSS. È un modo valido per produrre lo stesso effetto dell'attributo cellpadding della tabella.

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>

Allo stesso modo, puoi usare la proprietà CSS border-spacing per applicare la spaziatura tra i bordi di celle della tabella adiacenti come l'attributo cellpacing. Tuttavia, al fine di lavorare la spaziatura dei bordi, il valore della musa della proprietà di collasso dei bordi deve essere separato, che è l'impostazione predefinita.

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>

Prova questo:

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

Oppure prova questo:

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

Ho usato !importantdopo il crollo del confine come

border-collapse: collapse !important;

e funziona per me in IE7. Sembra sovrascrivere l'attributo cellpacing.

<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-paddingpuò essere fornito da paddingCSS mentre cell-spacingpuò essere impostato impostando la border-spacingtabella.

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

Violino .

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

Se marginnon ha funzionato, tenta di impostare displaydi tra blocke quindi il margine funzionerà.

Per le tabelle, cellpacing e cellpad sono obsoleti in HTML 5.

Ora per la spaziatura cellulare devi usare la spaziatura dei bordi. E per il cellpadding devi usare border-collapse.

E assicurati di non usarlo nel tuo codice HTML5. Cerca sempre di utilizzare questi valori in un file CSS 3.

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

In una tabella HTML, cellpaddinge cellspacingpuò essere impostato in questo modo:

Per imbottitura cellulare :

Chiama semplicemente una td/thcella padding.

Esempio:

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

Per spaziatura cellulare

Chiama semplicemente table border-spacing

Esempio:

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

Più stile tabella tramite collegamento sorgente CSS qui ottieni più stile tabella tramite CSS .

Puoi semplicemente fare qualcosa del genere nel tuo CSS, usando border-spacinge 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>

Che ne dici di aggiungere lo stile direttamente al tavolo stesso? Questo invece di utilizzare tablenel tuo CSS, che è un approccio MALE se hai più tabelle nella tua pagina:

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

Suggerisco questo e tutte le celle per la tabella particolare sono state eseguite.

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

Puoi controllare il codice qui sotto semplicemente creare un index.htmled eseguirlo.

<!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>

PRODUZIONE :