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
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
It's certainly powerful, and it is indeed a light-weight method of generating a bar graph, but I can't help but feel that there's something wrong about it. Maybe it's the explicit inline heights on the elements.
Perhaps if I view it more as an enhancement on visual media than a hack for non-visual ones...
In any cases, it is still fairly accessible from a non-visual point-of-view, and the semantics are good with either the nested lists or the table (though I prefer the latter).
Statistics is usually the general example I give as to a good application of tables (for people who ask me: "if I shouldn't use tables (for layout), why do they exist then?"), so it would be, to say the least, contraditory for me to choose otherwise for the graphs (although for simple "this-that" graphs, the definition list is a suitable "second best" approach).
No matter how hard I try, I just can't see the justification for unordered lists. Definition lists, perhaps. I've used them myself in the those one-to-one relationship situations that Joćo mentions. But nested, unordered lists just don't make any sense from a semantic standpoint in my opinion. Certainly in Eric's example, table headers are crucial for tying together the dollar value with a key to what that dollar value represents. Without CSS, the user would be left scratching their head.
While I was at McAfee, I created an XHTML/CSS prototype of their SecurityCenter application to demonstrate how easy it would be to customize. In it, I ended up using both a definition list to denote an on/off situation, and a table to display a graph.
Y'know, I think you're both right. The lists just don't quite work, because even though they have the same nested structure, there isn't an implication of data being comparable between lists, like there is with data being comparable between rows in a table. And the default rendering by the user agent is more appropriate with a table.
It should be a table and no argument; just think how an Assistive Screen Reading device would interpret the markup. Let alone with the table it has rich markup features that are suited for tabular data.
I agree that a table is the most correct way of marking up this data.
However, if the graph is very simple, I think using lists of some kind can be tolerated.
i have seen your documentation. Its very helpfull gor me. thanks for everything
Masud
Sorry, comments are closed for this post.