元素而不是段落元素。另外两个例子则是使用了定义列表dl和无序列表ul实现。
访问实例1
2，符合标准的可访问的可视化数据图表
![]()
http://farm4.static.flickr.com/3260/2874182691_4e99063606.jpg?v=0
作者wilson miner研究数据图表的web accessible可访问性概念和标准兼容性技术，涉及优势、限制或是说两者取长补短的折中用法。这里有三个使用无序列表ul基本结构实现的实例。
访问实例1 访问实例2 访问实例3
3，css竖行图表
![]()
http://farm4.static.flickr.com/3121/2874182695_47d2bc4d3a.jpg?v=0
这个实例展示的是一个和“css线条图表数据”类似的应用，使用无序列表ul实现竖行图表效果。
访问实例
4，使用百分比和背景图片创建图表
![]()
http://farm4.static.flickr.com/3061/2874182697_5a3329ac98.jpg?v=0
在这个例子中，你可以参考使用预先做好的背景图片完成适当的数据描述。但缺陷就是这个预先设计好的背景图片也会局限住其使用范围，如果要实现更多的不同效果，就要增加css和html文件大小，同时，你的http连接数也就会增加。
访问实例
5，纯碎的css数据图表
![]()
http://farm4.static.flickr.com/3261/2874182699_6b917eecf7.jpg?v=0
这个例子使用定义列表dl标记，然后在定义列表中用元素来控制柱形区域的高度，用元素来显示图表遮罩区域的数值表示和在条形中间的绝对位置。
访问实例
6，css实现小块错综区域图表
![]()
http://farm4.static.flickr.com/3284/2874182701_fd892309b0.jpg?v=0
至今还没遇到过类似的应用，但通过这个实例一定可以有效地提高你的css应用能力。
访问实例
7，定义列表dl实现线条图表
![]()
http://farm4.static.flickr.com/3103/2874187491_eccd3fbf1f.jpg?v=0
这个技巧用两个横向线条图表实例来表述dl实现方法，每一个例子都是使用被赋予class的dl元素来控制图表的宽度百分比。
访问实例
8，具备可访问行的线条图表
![]()
http://farm4.static.flickr.com/3269/2874187497_a9f0f478b7.jpg?v=0
该实例使用table来控制整天图表的结构，然后使用css样式及背景图片来将图表延伸至适当的宽度。
访问实例
原文地址：8 css techniques for charting data
http://bbon.cn/2008/09/8%e4%b8%aacss%e6%9f%b1%e5%bd%a2%e5%9b%be%e8%a1%a8%e6%8a%80%e6%9c%af%e5%ba%94%e7%94%a8.html
