Tables to Bar Graphs
In “Bar Graphs With Style“, I took a set of nested lists and some divs 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.)
I must admit that when I first assembled this table-based chart demo, it was with some trepidation. From a CSS point of view, of course, it doesn’t matter what elements you position, nor how: a td is no different than a div or any other element. Historical browser behavior, though, has been to put table markup into its own special category and treat it as being extra-special—as witness IE/Win’s handling of the original demo. I was honestly afraid that, in overriding the display values for table elements (by positioning them), I’d crash a browser. So far, no crashes, but proceed at your own risk!
