Understand and usage cellpadding and cellspacing tag table css

Many people use HTML and have no idea with cellpadding and cellspacing in tag table. From my last interview for a new programmer, his skill is quite nice with PHP but when I try to ask him about this, he have no idea :). Any, today I will show you what is it and how to use cellpadding and cellspacing in table.

In HTML, the table styles cellpadding and cellspacing can be set

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

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

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.