Set cellpadding and cellspacing in CSS?

Answer 1

In an HTML table, the cellpadding and cellspacing can be set like this:

For cell-padding:

Just call simple td/th cell padding.

Example:

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

For cell-spacing

Just call simple table border-spacing

Example:

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

More table style by CSS source link here you get more table style by CSS.

Answer 2

I used !important after the border-collapse like

border-collapse: collapse !important;

and it works for me in IE7. It seems to override the cellspacing attribute.

Answer 3

How about adding the style directly to the table itself? This is instead of using table in your CSS, which is a BAD approach if you have multiple tables on your page:

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

Answer 4

Default

The default behavior of the browser is equivalent to:

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

         

Cellpadding

Sets the amount of space between the contents of the cell and the cell wall

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

        

Cellspacing

Controls the space between table cells

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

        

Both

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

        

Both (special)

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

        

Note: If there is border-spacing set, it indicates border-collapse property of the table is separate.

Try it yourself!

Here you can find the old HTML way of achieving this.

Answer 5

From what I understand from the W3C classifications is that <table>s are meant for displaying data 'only'.

Based on that I found it a lot easier to create a <div> with the backgrounds and all that and have a table with data floating over it using position: absolute; and background: transparent;...

It works on Chrome, Internet Explorer (6 and later) and Mozilla Firefox (2 and later).

Margins are used (or meant anyways) to create a spacer between container elements, like <table>, <div> and <form>, not <tr>, <td>, <span> or <input>. Using it for anything other than container elements will keep you busy adjusting your website for future browser updates.

Answer 6

The simple solution to this problem is:

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