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.
Subscribe / follow
- Senior Front End Developer at Synacor, Inc. (Buffalo, NY, Ne, US)
- Front-end WordPress Developer - Contract to Hire at HyperArts (Oakland, CA, Ca, US)
- Web Developer
- Information Graphics Designer, Pew Forum on Religion & Public Life at Pew Research Center (Washington, DC, Di, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost