Posts from Wednesday, December 21st, 2005

Tables to Bar Graphs

Published 12 years, 9 months ago

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!