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.

Posted on January 11, 2006 in CSS, Quicklinks

Comments

  1. January 11, 2006 by Tim McCormack

    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).

  2. January 11, 2006 by João Craveiro

    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).

  3. January 12, 2006 by Steve Ganz

    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.

  4. January 12, 2006 by Tim McCormack

    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.

  5. January 12, 2006 by Robert Wellock

    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.

  6. January 12, 2006 by Roger Johansson (Author comment)

    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.

  7. April 16, 2006 by Masud Parvez

    i have seen your documentation. Its very helpfull gor me. thanks for everything

    Masud

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.