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.
Comments
All fields are optional, email address will not be shown; no HTML, URLs are automatically hyperlinked.

There is this one too : http://nubyonrails.com/pages/css_graphs
That Ruby example is made with lists, not tables.
If I turn it off and then on again, the bars for each quarter will display one over the next (Firefox 1.5 for Win XP).
Yes, I've noticed that - I think it's something to do with the table width changing.