In “Bar Graphs With Style“, I took a set of nested lists and some div s and turned them into a vertical bar graph using CSS. Jan Brašna pointed out that the actual information I was presenting would probably be better represented as a table instead of nested lists. I don’t think there’s anything wrong with using the lists, but I do agree with him that a table might be a better base represention of the data. Maybe you agree. If so, then here you go: CSS Vertical Bar Graphs using a table as the markup basis.

The demo works fine in Safari, and in Firefox I got it to work by explicitly setting the table element to display: block (when I left it as display: table , the bars were badly misplaced). In IE/Win, everything’s fine except for the actual placement of the bars; they’re fine as a group but way out of place. I think the IE/Win problem is a simple refusal to give a table element dimensions when all of its descendants have been positioned, no matter what display value it’s given. Perhaps some intrepid soul can figure out a way to defeat this. [Update: some intrepid soul did, and the demo has been updated; it now works in IE/Win as well as most other browsers.]

(I considered the idea of positioning all the bars with top instead of bottom , thus sidestepping the table-sizing problem, but that would mean a different way to place the ‘ticks’ and in the end it was different enough from what I’d done that I just couldn’t be bothered. Feel free to run with the idea, though, or come up with a better one.)