STARIKOVS

In this article you can find an example of how to set the cellspacing and cellpadding values with help of CSS styles.

First let’s declare a table with cellspacing and cellpadding attributes and see how it looks:

<table cellpadding="3" cellspacing="3" border="1">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

In your browser this table has the following presentation:

Now, let’s override the values of cellspacing and cellpadding attributes with help of CSS style:

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

If we apply these styles to our table the cellspacing and cellpadding values of the table will be changed:

These styles work in all the mordern browsers. If you want these attributes get working in IE 6 and IE 7 you still should use HTML attributes. By the way, cellpadding and cellspacing HTML attributes ARE NOT deprecated so you can fearlessly use them.

What if cellspacing is zero?

If you need to set cellspacing to zero with help of CSS you should use these styles:

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

So, applying these styles to the table above we will get:

These styles work OK in IE6+.

Browsers

I’ve just tested this example in different browsers:

Need help on CSS properties? Check these links

border-collapse

border-spacing

padding