24 ways

to impress your friends

Tables with Style by Jonathan Snook

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.

Sample table example

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">
 ...

Check out the example.

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:

(bottom) Table → Column → Row Group → Row → Cell (top)

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.

About the author

Jonathan Snook is a web developer by trade and tirelessly puts his many skills to work on snook.ca and other projects.

Your comments

  1. § Nathan Smith:

    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!

  2. § Grant Palin:

    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.

  3. § Tim Burgan:

    Mmm.. eggnog. I love Eggnog!

  4. § Glen C.:

    Don’t forget the css zen garden of tables

  5. § Jonathan Snook:

    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.

  6. § Dustin Diaz:

    Gosh Jonathan, you made tables look so pretty! Well done.

  7. § trovster:

    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.

  8. § JérÔÔme:

    Ô 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).

  9. § karim:

    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

  10. § mirko:

    Thanks! Definitely a link that’s worth having, alongside the other 24ways articles. Well done!

  11. § Tim:

    Nice write-up…

    But what about the col tags, shouldn’t we close them ??

  12. § Jonathan Snook:

    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.

  13. § Tim:

    thx for the feedback Jonathan… and yes XHTML is the way to go ;-)

  14. § Bob Sawyer:

    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…

  15. § Jonathan Snook:

    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. :)

  16. § Milo van der Leij:

    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)

  17. § Milo van der Leij:

    Closing COL tags is forbidden.

  18. § Dylan:

    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.

  19. § Gerben:

    Nice one. Day 17 said to avoid using ’* html’ and two days later it’s back again.

    :-)

  20. § Charles Roper:

    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.

  21. § Dextro:

    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.

  22. § Jonathan Snook:

    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. :)

  23. § Richard Davies:

    What? You can style columns?!! Where have I been? This article was worth reading just for learning that cool trick! Thanks!

  24. § Richard Medek:

    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.

  25. § ark:

    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

  26. § FataL:

    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.

  27. § David Singleton:

    Another nice article.

    Good to see more people being made aware of thead, tbody, tfoot and the usefulness of cols and colgroups, although a shame that there’s no mention of very useful caption tag or the acessability enhancing summary attribute.

    @ FataL: There’s a good reason and explanation why browsers are limited in col styling, with the exception of IE, oddly.

  28. § andrwe:

    wow. what a nice table. ... it would be nice to see more links here of excellent table/data styling.

  29. § Julian Schrader:

    Why didn’t I know we can style columns That’s great!

Commenting is closed for this article.

24 ways: day 19