Set cellpadding and cellspacing in CSS?

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.

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

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.

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>