Welcome to WebmasterWorld Guest from 3.226.251.81

Forum Moderators: not2easy

Message Too Old, No Replies

Table properties cellspacing & cellpadding

Table element properties CSS Replacement

     
11:13 pm on May 27, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0


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?

9:56 am on May 28, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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

3:12 pm on May 28, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0


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.