Styled bar graphs marked up as lists or tables
Eric Meyer has posted a couple of examples that show how you can use CSS to create bar graphs. The first example, described in Bar Graphs With Style, uses unordered lists to mark up the bar graph data. The second demo, which Eric explains in Tables to Bar Graphs, uses a table instead.
There is a bit of a discussion in the comments to Eric’s articles on which is the most semantically correct to use for this. I don’t think using nested lists is wrong (I have used that approach for graphs on one or two sites), but I think a table is more appropriate, and that is what I generally use in scenarios like the one in Eric’s demos.
No matter which markup you prefer, both demos are good examples of the power of CSS.
- Previous post: CSS 3 selectors explained
- Next post: Search engines and canonical URLs