HTML Cellpadding and Cellspacing in CSS

In an HTML table, We can already set the cellpadding and cellspacing of a table. But, what if we like to implement with the help of CSS? Let’s see that.

Cell padding:

This is used for formatting purpose that is used to specify the space needed between the edges of the cells and also in the cell contents.

Cell Spacing:

This is one that is used for formatting but, there is quite major difference between cell padding and cell spacing. Cell padding is used for setting extra space that is used to separate cell walls from their contents whereas cell spacing is used for setting space between the cells.

Suppost, we have a table using “cellpadding” and “cellpadding” as below:

<table cellspacing="5" cellpadding="5">

For controlling the “cellpadding” using CSS, you can simply use padding on table cells.

E.g. for 5px of “cellpadding” the style will be:

td {
padding: 5px;
}

Read Also: Clearing floats

For controlling the “cellspacing” using CSS, you can apply the border-spacing CSS property to the table.

E.g. for 5px of “cellspacing” the style will be:

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

So, this property will even allow separate horizontal and vertical spacing that you couldn’t do with old “cellspacing” format.

But for Internet Explorer <= 7, if the situation is just right i.e. you want 0 cellspacing and the table doesn’t have it defined already then, you can use border-collapse:collapse.

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