How to set cellpadding and cellspacing in CSS?

Site Admin Joined: Jun 30, 2012 Posts: 213 Location: NL

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

Code:

td { 


    padding: 10px;


}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

Code:

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.

Code:

table { 


    border-spacing: 0;


    border-collapse: collapse;


}

Site Admin Joined: Jun 30, 2012 Posts: 213 Location: NL

border-collapse

This declaration takes two values:

separate: keep borders separate. This is the default.
collapse: merge borders of adjoining cells.

Code:

<table style="border-collapse: collapse">

border-spacing

border-spacing is cellspacing translated to CSS. Note that it needs a unit.

Code:

<table style="border-spacing: 10px;">

	bestbuildpc Forum Index -> Web Development	All times are GMT + 2 Hours
Page 1 of 1

Browser Support