Styles is very useful/ Thank you for this article. I will post some advice about CSS in my LS soon/ Check it.

Jonathan Julian said on November 18, 2005

"You can apply a margin to the table which will affect the amount of space around the table. Firefox correcly applied the margin between the caption and the table whereas IE and Opera apply the margin on the outside of the caption."

Actually, it looks as though Firefox incorrectly applies the margin between the caption and the table. See the CSS 2.1 spec. IE 6 and Opera 8 correctly apply margin outside of the caption; Firefox 1.0.7 does not.

Sandy said on October 04, 2006

Thanks for describing border-collapse and border-spacing. This is what I was looking for. Hopefully this tables will be looking good in IE7

codeslinger said on December 06, 2008

I know the above conversation took place about a million years ago, but this web page is still being used as a reference on table styling. So I just thought I'd mention a reasonable approach to solving the table column hi-light problem.

Note that I do not claim it to be the "best" approach, I leave it to somebody else to figure out whatever that is. But I think you will find this a usable approach.

What you do is you create a bunch of classes, one for each column (mytableC1, mytableC2, etc) . Then you define each cell to be a member of the class for it's column

Now all you need is a minimal JavaScript to change the color property for the column class via styles. You need only change one value and the whole column lights up.

You can apply other properties in this way as well which would overcome some of the limitations of table columns not being accessible as a group. Essentially you are creating a column group by using a class.

This won't scale well if you have a lot of columns, but for the 33 column table being discussed above it should work fine.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.