Scalable Bar Charts with Tables and CSS

·

Exerimenting with ways of representing data in XHTML, I tried to see if data in tables could be transformed into bar charts using CSS. Eric Meyer did a version of this a couple of months ago, but it uses absolute pixel placement of elements so doesn't scale when font size is increased. Here's what I've managed so far, with everything laid out in ems (only tested in Firefox and Safari):

An example data table.
Invoiced
800
Quarter 1
700
Q2
600
Q3
500
Q4

css off
css on

There are two hacks here: one is putting the <th> of each row after the <td>s so that it appears at the bottom of each column. The other is using two divs inside each table cell in order to size the columns. From a table with just data values in each cell, it would be possible to use Javascript to add the divs and calculate their sizes, but then it seems like you might as well use Javascript to draw the whole graph...

As an aside, it seems annoying that Firefox doesn't add classes applied to colgroups to the rest of the column - but maybe that's the correct behaviour.