3696

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?

3
  • 11
    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.
    – PJ Brunet
    Sep 1, 2016 at 7:12
  • 3
    Use border-spacing on table and padding on td.
    – Anubhav
    May 23, 2017 at 9:17
  • 6
    "Oh, dang, back in the olden days I did this with cellpadding and cellspacing... what is that in CSS again?" –me, pretty much every time I need to do this. Aug 13, 2021 at 16:43

19 Answers 19

3886

Basics

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

td, th { /* table cells */
    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.

10
  • 34
    cellpadding="0" can still make a difference in Chrome 13.0.782.215, even if border-collapse:collapse and border-spacing are applied to the table. Aug 25, 2011 at 3:01
  • 7
    @LeeWhitney you need to set padding: 0 on your table cells. Nov 29, 2011 at 10:09
  • 11
    It's little bit off topic, but cellpadding and cellspacing attributes are removed in HTML5, so CSS is the only way to go now.
    – Ignas2526
    Nov 22, 2013 at 19:10
  • 16
    Hi, all. I've updated the answer for clarity, including a section on cellpadding, which I'd thought was obvious (just use "padding"). Hope it's more useful now. Dec 16, 2013 at 6:27
  • 5
    True, @vapcguy, in any of the infinitely variable other situations you may be styling a table in, you will need to define more specific selectors. The above are marked as examples. Apr 1, 2015 at 20:41
1027

Default

The default behavior of the browser is equivalent to:

table  {border-collapse: collapse;}
td, th {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, th {padding: 6px;}

        Enter image description here

Cellspacing

Controls the space between table cells

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

        Enter image description here

Both

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

        Enter image description here

Both (special)

table  {border-spacing: 8px 2px;}
td, th {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.

5
  • 1
    How is the spacing around the table disappearing? When I set "border-spacing: 8px 12px, it adds the spacing not just between, but between the table border and the outside cells! But that is not depicted in the images here; they are flush left.
    – Kaz
    Nov 19, 2013 at 1:14
  • 1
    @2astalavista And unfortunately if someone wants the effect of the exterior spacing deleted, it won't work this way with these CSS attributes.
    – Kaz
    Nov 19, 2013 at 18:07
  • @Kaz You might need use negative margin to hide that annoying part.
    – user669677
    Nov 20, 2013 at 9:59
  • 2
    The default padding on TD is typically 1px, not 0
    – Jan M
    Nov 5, 2014 at 15:40
  • Beware: border-spacing:horizontal vertical; whereas, for example, padding:vertical horizontal;. Oct 30, 2020 at 19:03
370
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
1
  • 23
    That's cellspacing=0 equivalent. The equivalent for cellspacing=1 is completely different. See the accepted answer.
    – TRiG
    Jul 25, 2012 at 14:08
124

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.

2
  • 51
    In today's age that reality is suckage to the Nth degree.
    – John K
    Jul 9, 2010 at 2:36
  • 8
    This is almost correct, but border-collapse only works in IE 5-7 if the table doesn't already have a cellspacing attribute defined. I've written a comprehensive answer that merges all the correct parts of the other answers on this page in case that's helpful. Jul 9, 2010 at 2:36
111

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.

0
74

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

The simple solution to this problem is:

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

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

47

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.

0
26

This style is for full reset for tables - cellpadding, 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 */
}
22

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.

1
  • 37
    They are actually deprecated in html5.
    – Kzqai
    Nov 15, 2011 at 16:49
19

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.

17

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.

0
15

CSS:

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

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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

12

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

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.

1
  • 10
    !important would only be needed to override other CSS settings in a complex situation (and even then mostly a wrong approach). May 30, 2013 at 10:37
9

Say that we want to assign a 10px "cellpadding" and a 15px "cellspacing" to our table, in a HTML5-compliant way. I will show here two methods giving really similar outputs.

Two different sets of CSS properties apply to the same HTML markup for the table, but with opposite concepts:

  • the first one uses the default value for border-collapse (separate) and uses border-spacing to provide the cellspacing,

  • the second one switches border-collapse to collapse and uses the border property as the cellspacing.

In both cases, the cellpadding is achieved by assigning padding:10px to the tds and, in both cases, the background-color assigned to them is only for the sake of a clearer demo.

First method:

table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}
<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>

Second method:

table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}
<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>

6
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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.