tml – Set cellpadding and cellspacing in CSS?

The Question :

3408 people think this question is useful

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

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

How can the same be accomplished using CSS?

The Question Comments :
  • Just a general suggestion, check to see if your style.css does a “reset” on your tables before trying these solutions. Example: If you don’t have tables set to width:auto then border-collapse might not work as expected.
  • Use border-spacing on table and padding on td.

The Answer 1

3645 people think this answer is useful

Basics

For controlling “cellpadding” in CSS, you can simply use padding on table cells. E.g. for 10px of “cellpadding”:

td { 
    padding: 10px;
}

For “cellspacing”, you can apply the border-spacing CSS property to your table. E.g. for 10px of “cellspacing”:

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

This property will even allow separate horizontal and vertical spacing, something you couldn’t do with old-school “cellspacing”.

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you’re almost out of luck. I say “almost” because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you’re trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn’t have it defined already), you can use border-collapse:collapse.

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

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

The Answer 2

962 people think this answer is useful

Default

The default behavior of the browser is equivalent to:

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

         Enter image description here

Cellpadding

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

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

        Enter image description here

Cellspacing

Controls the space between table cells

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

        Enter image description here

Both

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

        Enter image description here

Both (special)

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

        Enter image description here

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.

The Answer 3

351 people think this answer is useful
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

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

The Answer 4

118 people think this answer is useful

Setting margins on table cells doesn’t really have any effect as far as I know. The true CSS equivalent for cellspacing is border-spacing – but it doesn’t work in Internet Explorer.

You can use border-collapse: collapse to reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the cellspacing attribute.

The Answer 5

104 people think this answer is useful

This hack works for Internet Explorer 6 and later, Google Chrome, Firefox, and Opera:

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

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

The * declaration is for Internet Explorer 6 and 7, and other browsers will properly ignore it.

expression('separate', cellSpacing = '10px') returns 'separate', but both statements are run, as in JavaScript you can pass more arguments than expected and all of them will be evaluated.

The Answer 6

72 people think this answer is useful

For those who want a non-zero cellspacing value, the following CSS worked for me, but I’m only able to test it in Firefox.

See the Quirksmode link posted elsewhere for compatibility details. It seems it may not work with older Internet Explorer versions.

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

The Answer 7

55 people think this answer is useful

The simple solution to this problem is:

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

The Answer 8

51 people think this answer is useful

Also, if you want cellspacing="0", don’t forget to add border-collapse: collapse in your table‘s stylesheet.

The Answer 9

44 people think this answer is useful

Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap every cell in a column to get a uniform effect. For example, to just get wider left & right margins:

So the CSS will be,

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>

Yes, it’s a hassle. Yes, it works with Internet Explorer. In fact, I’ve only tested this with Internet Explorer, because that’s all we’re allowed to use at work.

The Answer 10

24 people think this answer is useful

Just use border-collapse: collapse for your table, and padding for th or td.

The Answer 11

22 people think this answer is useful

This style is for full reset for tablescellpadding, cellspacing and borders.

I had this style in my reset.css file:

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

The Answer 12

20 people think this answer is useful

TBH. For all the fannying around with CSS you might as well just use cellpadding="0" cellspacing="0" since they are not deprecated…

Anyone else suggesting margins on <td>‘s obviously has not tried this.

The Answer 13

18 people think this answer is useful
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

The Answer 14

17 people think this answer is useful

Simply use CSS padding rules with table data:

td { 
    padding: 20px;
}

And for border spacing:

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

However, it can create problems in older version of browsers like Internet Explorer because of the diff implementation of the box model.

The Answer 15

15 people think this answer is useful

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.

The Answer 16

13 people think this answer is useful

CSS:

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

The Answer 17

12 people think this answer is useful

You can easily set padding inside the table cells using the CSS padding property. It is a valid way to produce the same effect as the table’s cellpadding attribute.

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>

Similarly, you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute. However, in order to work border-spacing the value of border-collapse property muse be separate, which is default.

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>

The Answer 18

11 people think this answer is useful

Try this:

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

Or try this:

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

The Answer 19

9 people think this answer is useful

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.

The Answer 20

8 people think this answer is useful
<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 can be given by padding in CSS while cell-spacing can be set by setting border-spacing for table.

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

Fiddle.

The Answer 21

6 people think this answer is useful
td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

If margin didn’t work, try to set display of tr to block and then margin will work.

The Answer 22

5 people think this answer is useful

For tables, cellspacing and cellpadding are obsolete in HTML 5.

Now for cellspacing you have to use border-spacing. And for cellpadding you have to use border-collapse.

And make sure you don’t use this in your HTML5 code. Always try to use these values in a CSS 3 file.

The Answer 23

5 people think this answer is useful
table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

The Answer 24

5 people think this answer is useful

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.

The Answer 25

3 people think this answer is useful

You can simply do something like this in your CSS, using border-spacing and 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>

The Answer 26

1 people think this answer is useful

You can check the below code just create a index.html and run it.

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

OUTPUT :

enter image description here

The Answer 27

0 people think this answer is useful

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>

The Answer 28

0 people think this answer is useful

I suggest this and all the cells for the particular table are effected.

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

Add a Comment