Mastering html data tables
Saturday, April 11th, 2009
Last year my job was front-end development for dreamteamfc.com, the Sun’s fantasy league website. Much of the work involved styling tables of data, such as that on the right (and that was by no means the most complicated design, though I don’t have a dummy password any more to be able to access them).
It was a source of constant frustration to me that there was a distinct lack of useful information on the web on how to style tables. Any search for “html table design” or “styling html tables” would either result in an outdated guide to designing websites using html tables (It would be great if the w3c had a great big fiery sword they could use to scour the internet of all mentions of using tables for page layout, as the late nineties has left millions of outdated web design tutorials on the web, cluttering up the place and leading astray people new to the field), or turned up a hopelessly unambitious tutorial on how to use very work-a-day CSS to style text colour and background colours.
So I had to get to grips with data tables – the first I had ever styled as I never learned the bad old ways of web design using non-semantic tables – and after doing so fairly successfully (the only extra markup, apart from classes, needed for the design on the right was an empty footer row in the table, and only a few tiny images too) I thought I should share what I’d learned on the web as few other people seem to be doing so.
Nearly a year later I’m finally getting going on this fairly huge task, and there shoudl, if I stay focused, be a number of posts to follow.
Incidentally, the screenshot on this page, and that on my post about internet explorer, were taken using Fireshot, a blinding firefox extension enabling screenshots of whole pages, cropping before saving. A must for anyone who ever needs to share images of web designs.