It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting.
Where do I start?
First, if you have some tabular data (you know, like a spreadsheet with rows and columns) that you’d like to spiffy up, pop it into a table — it’s rightful place!
To add more semantics to your table — and coincidentally to add more hooks for CSS — break up your table into row groups. There are three types of row groups: the header (thead), the body (tbody) and the footer (tfoot). You can only have one header and one footer but you can have as many table bodies as is appropriate.
Inspiration
Table Striping
To improve scanning information within a table, a common technique is to style alternating rows. Also known as zebra tables. Whether you apply it using a class on every other row or turn to JavaScript to accomplish the task, a handy-dandy trick is to use a semi-transparent PNG as your background image. This is especially useful over patterned backgrounds.
tbody tr.odd td { background:transparent url(background.png) repeat top left; }* html tbody tr.odd td { background:#C00; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='background.png', sizingMethod='scale'); }
We turn off the default background and apply our PNG hack to have this work in Internet Explorer.
Styling Columns
Did you know you could style a column? That’s right. You can add special column (col) or column group (colgroup) elements. With that you can add border or background styles to the column.
<table>
<col id="ingredients">
<col id="serve12">
<col id="serve24">
...
Fun with Backgrounds
Pop in a tiled background to give your table some character! Internet Explorer’s PNG hack unfortunately only works well when applied to a cell.
To figure out which background will appear over another, just remember the hierarchy:
The Future is Bright
Once browser-makers start implementing CSS3, we’ll have more power at our disposal. Just with :first-child and :last-child, you can pull off a scalable version of our previous table with rounded corners and all — unfortunately, only Firefox manages to pull this one off successfully. And the selector the masses are clamouring for, nth-child, will make zebra tables easy as eggnog.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
19/12/2005
Mmm.. eggnog. I love Eggnog!
Vote Helpful or Unhelpful
19/12/2005
Great write-up. It’s good to see more attention being given to semantics, and implictly increased style-ability, for tables. I admit that back in the dark days of table design, I often found little use for Tbody or Tfoot, or the like, since all we were using tables for was presentation (tisk tisk). And, now that most layouts are done in CSS, entire months will go by without having to deal with tables at all. Thanks for reminding us about proper usage, and helping to merge the old-school with new methods. Also, gotta love the candy-cane holiday zebra-striped theme!
Vote Helpful or Unhelpful
19/12/2005
Some good examples. I agree with your point at the beginning about how tables can be an interesting (if not sometimes frustating!) element to style. What with the different sub-elements you can style, there’s many different things that can be done to style tables.
One thing that can make things difficult is the html attributes for padding and spacing – if you don’t take those into account when styling tables, your work would be a lot more difficult. I know when I was learning CSS, this plagued me to no end until I realized that I should zero the table’s cellpadding and cellspacing attributes to make things easier.
Vote Helpful or Unhelpful
19/12/2005
Don’t forget the css zen garden of tables
Vote Helpful or Unhelpful
19/12/2005
Thanks Glen! I had it in a previous revision of this article and then it got lost in the rewrite. Definitely a good link to have for some inspiration.
Vote Helpful or Unhelpful
19/12/2005
Gosh Jonathan, you made tables look so pretty! Well done.
Vote Helpful or Unhelpful
19/12/2005
Pretty funky table. I had my doubts that they could look nice, but you’ve certainly quashed them…
Jonathan: I think you missed the html part of your star-hack in the article, but not on the page.
Vote Helpful or Unhelpful
19/12/2005
Ô thank you. I’m looking for this way of assigning an id to a col for a long time now. But CSS gurus talk about evreything but tables (except to get rid of them, mostly rightly though).
Vote Helpful or Unhelpful
19/12/2005
Hi all,
First of all thanks a lot for these articles! It’s very interesting!
Well about :first-child and :last-child
I used to use them with tables, like you
did. And for IE and others
I suggest using classes named
.firstchild and lastchild which will be
styled like the elements with the selectors :first-child and :last-child
respectively.
and of course aply to the first TR (or TD) the class .firstchild and to the last ones .lastchild.
Well, I hope you enjoy my modest idea,
I’m personally using it :)
Thanks again
Vote Helpful or Unhelpful
19/12/2005
Thanks! Definitely a link that’s worth having, alongside the other 24ways articles. Well done!
Vote Helpful or Unhelpful
19/12/2005
Nice write-up…
But what about the col tags, shouldn’t we close them ??
Vote Helpful or Unhelpful
19/12/2005
trovster: ha, not much of a star-html hack if I forget the -html part now is it? :) Fixed.
Tim: If you’re using XHTML, you absolutely should. All my examples use HTML, in which case, you shouldn’t.
Vote Helpful or Unhelpful
19/12/2005
thx for the feedback Jonathan… and yes XHTML is the way to go ;-)
Vote Helpful or Unhelpful
19/12/2005
JS: All my examples use HTML, in which case, you shouldn’t.
Really? Shouldn’t, or don’t have to? I don’t want to start an ideological war of words here, but I’ve never known HTML to be restrictive with closing tags. Isn’t it just good practice to close them regardless of whether you’re using XHTML or HTML?
Lovely examples, by the way. Don’t want to take away from the point of the article, which is excellent…
Vote Helpful or Unhelpful
19/12/2005
While it probably doesn’t hurt, the HTML 4.01 spec actually says:
“Some HTML element types have no content. For example, the line break element BR has no content; its only role is to terminate a line of text. Such empty elements never have end tags.” COL is an empty element. So, no, you shouldn’t. :)
Vote Helpful or Unhelpful
19/12/2005
Don’t forget, you can only style COL and COLGROUP tags in a very limited way (also see: this explanation of why that is)
Also: “TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.” (according to the HTML 4.01 specification)
Vote Helpful or Unhelpful
19/12/2005
Closing COL tags is forbidden.
Vote Helpful or Unhelpful
19/12/2005
That really is a beautiful table, so red and shiny… In a time when I’ve been getting a bit tired of CSS, you’ve sparked my interest again with that well designed table.
The COL element doesn’t have a closing tag, it just self closes like an IMG or BR (br /), so you wouldn’t close it in HTML in just the same fashion you wouldn’t close a BR in HTML but would in XHTML.
Vote Helpful or Unhelpful
19/12/2005
Nice one. Day 17 said to avoid using ’* html’ and two days later it’s back again.
:-)
Vote Helpful or Unhelpful
19/12/2005
Gerben, you beat me to the punch. In light of Tantek’s excellent article and day 17, I’m trying to do away with hacks where possible and the * html hack it a prime candidate. So I modified the CSS a bit and used
tbody tr.odd td { ... }for the non-compliant browsers and then used
tbody tr.odd > td { ... }to feed the correct declarations to the good browsers.
Seems to work a treat.
Vote Helpful or Unhelpful
19/12/2005
Apparently there is (even with the png hack) some problem in Internet Explorer. See the picture to see the difference.
Example picture on flickr
Sorry, I don’t have time this week to check out what causes the problem.
Vote Helpful or Unhelpful
20/12/2005
Dextro: pretty observant! :) The problem is that IE won’t apply the png hack filter to a cell that doesn’t have a background set. You’ll notice that in the PNG hack example on this page, I actually set the background color to #C00. Let’s hope IE7 gets it right. :)
Vote Helpful or Unhelpful
21/12/2005
What? You can style columns?!! Where have I been? This article was worth reading just for learning that cool trick! Thanks!
Vote Helpful or Unhelpful
22/12/2005
No freakin’ kidding… a week after I skin a mess of calendars this tip pops up. Thanks for some great advice and a beautiful example.
Vote Helpful or Unhelpful
22/12/2005
OK, this is a bit not on the subject, I hope you guys can find a moment to help me out with my little problem…
My strong part is the server-side scripting, so I have a server-side script that generates images for rounded corners.
I have a library of my functions, so I can use this script on all of sites I develop, from a single file.
Point is it’s a single piece of code that generates rounded corners on both these sites: http://www.haroldauto.com/edit:1:43t243r and http://www.bmw-speedometer-repair.com/Safety.html
If someone could have a look and tell me why does the second site shows a bit of the wrong image in the top right corner, I would appreciate it very much.
It’s a single script on the server, and CSS/XHTML is not my strong side, I tried to make the css(at least the relevant css(I thought)), the same on both sites, but something must be off.
thanks,
ark
Vote Helpful or Unhelpful
22/12/2005
Opera for now is the one browser that can style TBODY (tbodies) – in the example only Opera has border after TBODY.
Opera 9 TP1 has pretty good rendering for last example.
Too bad that all browsers have so little support for styling COLs and COLGROUPs.
Vote Helpful or Unhelpful
22/12/2005
Another nice article.
Good to see more people being made aware of
thead, tbody, tfootand the usefulness ofcolsandcolgroups, although a shame that there’s no mention of very usefulcaptiontag or the acessability enhancingsummaryattribute.@ FataL: There’s a good reason and explanation why browsers are limited in col styling, with the exception of IE, oddly.
Vote Helpful or Unhelpful
23/12/2005
wow. what a nice table. ... it would be nice to see more links here of excellent table/data styling.
Vote Helpful or Unhelpful
05/01/2006
Why didn’t I know we can style columns
That’s great!
Vote Helpful or Unhelpful
Impress us