Set cellpadding and cellspacing in CSS?

Question

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?

Answer 1

You can use padding on the table cells for controlling "cellpadding" in CSS.

For example: To set 10px of "cellpadding" try this:

td { 

    padding: 10px;

}

you can try using the border-spacing CSS property to your table for "cellspacing".

Example: To set 10px of "cellspacing" do this:

table { 

    border-spacing: 10px;

    border-collapse: separate;

}

The above property will even allow separating horizontal and vertical spacing, which can not be done just by using "cellspacing".

keypoints are as follows if you are using IE <= 7

This property will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7. However, these browsers support the border-collapse property, which merges the borders of adjoining table cells.

But, if you want to eliminate cellspacing (that is, cellspacing="0") then the border-collapse:collapse will have the same effect: no space will be there between table cells.

Note: 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), then you can use border-collapse:collapse like this:

table { 

    border-spacing: 0;

    border-collapse: collapse;

}