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.

editor_main_table_cellpadding_cellspacing

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.

 

One comment

  1. It look like it doesn’t work. I has done the cellpadding and cellspacing are 0 for all in CSS but I have no change in UI. Any other tips for that?

Leave a Reply

Your email address will not be published. Required fields are marked *

*