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.
(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 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!