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):
| Invoiced | Collected | |
|---|---|---|
|
800
|
900
|
Quarter 1 |
|
700
|
200
|
Q2 |
|
600
|
900
|
Q3 |
|
500
|
200
|
Q4 |
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.