Table properties cellspacing & cellpadding

Table element properties CSS Replacement

[The_Warden]

I've noticed quite a bit of discussion over Table element properties in regards to CSS replacement of cellpadding and cellspacing. Doing my own research ([w3.org ]) and reading in this discussion forum border-collapse, border-spacing, margin and padding are the replacement.

However I have not been able to find the answer on how to get border-collapse and border-spacing to work in IE using CSS. The properties work fine in Mozilla and Opera. Is there a solution to do this in CSS or are we to just use the cellpadding and cellspacing table element properties? It is my understanding that tables are to be used to show tabular data. Therefore I figured that the properties of the table element should be controlled using CSS, the styling.

In my case I have a table show tabular data and I wish to have a background border outside of the table and space between the table cells. The cells would alternate background color. The affect of creating horizontal and vertical lines to separate the data.

Comments, solutions?

[SuzyUK]

Hi The_Warden

You're quite right, it's frustrating that IE won't support all the table properties, and I've long since given up hoping too :)

border-collapse and border-spacing to work in IE using CSS

border-collapse

does work in IE if all you need to do is have them collapse (i.e. require no border-spacing and would like the cell borders to collapse when they meet) you need to put it on the table property itself though.

border-spacing

however is the one it doesn't support, which means that effectively rules out the use of the seperated borders model for IE, the best alternative is to continue to use

cellspacing

in your HTML.

cellpadding

in the HTML, can be ditched, it is reliably overcome in all browsers just by using

padding

on the <td> elements.

In a seperated borders model (i.e. with cellspacing) you could set the relevant properties in the CSS and also just remember to add the cellspacing attribute that way in the future it will backwards comptible for IE and will still work (or be differently styled) in compatible browsers. You don't have to use both as

cellspacing

should still work for them all too, but to be future prepared, up to you..

Best of a bad job at the minute IMO

Suzy

[The_Warden]

Thanks for the perfect explanation. This is exactly what I figured but just wanted to verify it. I have my border-collapse: separate; and border-spacing: 2px;. This explains why it's not working. I'll do what you suggested, thanks.