2007-05-17
如今，许多网站上都会用到统计表，于是我们需要为它们制作一些漂亮的图片来呈现，自然而然又想利用最少的带宽和最简单的标记。在把这些图片放到网页上的方法，一个是插入图片，一个是背景图片。
插入图片的代码固然简单，但是没有语义，跨平台的展示性并不强。那么背景图片呢，在更加没有语义的同时我们还要面临背景图片的两个问题：1.并非所有浏览器的默认设置是可以打印背景图片 2.用户不能复制图片中的数据到word文档或者outlook等其它编辑器。当然，我们可以告诉用户更改浏览器的打印设置，令其可以打印背景图片，但是要求用户这样做明显不是个好主意。接下来，我要介绍是另外一种方法，与以上两种方法完全不同哦～
什么是图表？
举个例子吧，比如：一个网站每月的浏览次数统计。我们需要画出一张下面这样的图表：
之前已经说过，直接在网页上插入一张图片是没有语义的，现在，我们要用一张表格来完成它，将需要展示的数据放入表格先：
<table>
<tr>
<th>Visits 2005</th>
<td>10000</td>
<td>15000</td>
<td>20000</td>
<td>30000</td>
<td>35000</td>
<td>40000</td>
<td>50000</td>
<td>60000</td>
<td>70000</td>
<td>80000</td>
<td>90000</td>
<td>100000</td>
</tr>
<tr>
<th></th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</tr>
</table>
以上代码的显示效果会是这样：
| Visits 2005 | 10000 | 15000 | 20000 | 30000 | 35000 | 40000 | 50000 | 60000 | 70000 | 80000 | 90000 | 100000 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec |
你一定会提出疑义：没有图片的情况下，月份名称应该在浏览数据的上面。稍等一下，我们来切两张图片：
一张给圆柱，圆柱必须有足够高。
一张作线状背景
现在，我们来把表格的代码稍做变动，放入对应的柱状图片：
<table class="bargraph">
<tr>
<th>Visits 2005</th>
<td>10000<img src="column.gif" mce_src="column.gif"
width="36" height="10" alt="10000" /></td>
<td>15000<img src="column.gif" mce_src="column.gif"
width="36" height="30" alt="15000" /></td>
<td>20000<img src="column.gif" mce_src="column.gif"
width="36" height="40" alt="20000" /></td>
<td>30000<img src="column.gif" mce_src="column.gif"
width="36" height="60" alt="30000" /></td>
<td>35000<img src="column.gif" mce_src="column.gif"
width="36" height="70" alt="35000" /></td>
<td>40000<img src="column.gif" mce_src="column.gif"
width="36" height="80" alt="40000" /></td>
<td>50000<img src="column.gif" mce_src="column.gif"
width="36" height="100" alt="50000" /></td>
<td>60000<img src="column.gif" mce_src="column.gif"
width="36" height="120" alt="60000" /></td>
<td>70000<img src="column.gif" mce_src="column.gif"
width="36" height="140" alt="70000" /></td>
<td>80000<img src="column.gif" mce_src="column.gif"
width="36" height="160" alt="80000" /></td>
<td>90000<img src="column.gif" mce_src="column.gif"
width="36" height="180" alt="90000" /></td>
<td>100000<img src="column.gif" mce_src="column.gif"
width="36" height="200" alt="100000" /></td>
</tr>
<tr>
<th></th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</tr>
</table>
请注意我只给这个table加了一个class，所以它还是很能令人接受，是吧:)
现在唯一剩下的就是用css完成整个案例：
.bargraph {
font: 0.6em/2em Arial;
color: #ddb;
border-collapse: collapse;
width: 476px;
}
.bargraph td {
padding:0;
margin:0;
vertical-align:bottom;
text-align:center;
background: #2d271c url(gridline.gif) 15px bottom;
}
.bargraph th {
background: #2d271c;
}
.bargraph img{
display:block;
border-right: 1px solid #000;
}
实例地址：http://www.khmerang.com/csslab/bargraphs/bargraph.html
本文思想及图片引自：http://www.khmerang.com/index.php?p=118，感谢精彩的原作！
发表评论
| 姓名： | |
| E-mail： | |
| 地址： | |
评论
不错不错,学习了..收藏
不太懂css
很喜欢你的博客，希望以后可以看到更多好咚咚，祝开心哦！
老大，你终于更新了～帮顶了～^_^～
今天第一次翻译东西，准确地说，根本不是翻译，只是把别人的东西变成自己的语言，用自己的方法描述出来而已，水平不到之处还请各位见谅！
怎么没人捧场：）
这东西在哪能用到？