Styling on a column level can be a really powerful tool to create great looking tables. I'm no designer, so I can't show you how to create great looking columns, but I can show you the points of attack.
By using only "one point of attack" in the markup per column makes for leaner pages. By that, I mean that you could put a class on each td (first, second, etc) on every row, but that isn't really necessary, and with big tables, big html.
Internet Explorer supports a lot of styling opportunities with the
colgroup element. With Firefox and Opera (not sure about Safari), you can only apply a handful of styles using this element, but on the other hand, they fully support
CSS 2.1 which has some really powerful selectors.
Example of unstyled columnsStyling for < IE 7
I have three colgroups, one for each column. The first for column one, second for...
<colgroup id="name" />
<colgroup id="address" />
<colgroup id="guild" />
Using the CSS 1 id selector, #, it's quite easy to style columns in older IE browsers:
#name { font-weight: bold; width: 200px; background: #eee; }
#address { width: 150px; color: #888; }
#guild { font-style: italic; }
Example of styling using colgroupStyling for modern browsers (FF, Opera, Safari)
To get a reference to specific columns, I use the
:first-child selector, and the
adjacent sibling selector.
First column in the table body (the table has id="css21"):
#css21 tbody td:first-child { font-weight: bold; width: 200px; background: #eee; }
Second column:
#css21 tbody td:first-child + td { width: 150px; color: #888; }
Third column:
#css21 tbody td:first-child + td + td { font-style: italic; }
For more columns, simply add
+ td per column.
Example of styling using CSS 2.1The CSS combined
#name { font-weight: bold; width: 200px; background: #eee; }
#css21 tbody td:first-child { font-weight: bold; width: 200px; background: #eee; }
#address { width: 150px; color: #888; }
#css21 tbody td:first-child + td { width: 150px; color: #888; }
#guild { font-style: italic; }
#css21 tbody td:first-child + td + td { font-style: italic; }
Example using both colgroup and CSS 2.1 stylingThe reason for the redundancy is that IE6 seem to ignore
styles that uses the above CSS 2.1 selectors, instead of ignoring the
selector.
This would be ignored by IE6:
#guild, #css21 tbody td:first-child + td + td { font-style: italic; }
To remove the redundancy from the rendering engine of the browser, you could exploit the
star html bug in pre IE 7 browsers. Add * html before each colgroup-styling. Then the rendering engines of IE 6 and older browsers see those styles, whereas modern browsers only see the CSS 2.1 selector styles.
Example:
/* Only visible to pre IE 7 */
* html #guild { font-style: italic; }
/* For modern browsers */
#css21 tbody td:first-child + td + td { font-style: italic; }
Great CSS 2.1 information
456 Berea Street CSS Selectors Part 1456 Berea Street CSS Selectors Part 2456 Berea Street CSS Selectors Part 3Comments, critique, etc. are as always appreciated!
