用CSS实现柱状图（Bar Graph）的方法（四）—table实现复杂柱状图

前面的文章，主要讲到如何使用无序列表ul元素来实现复杂柱状图，但是在Web标准中，除了注重表现外，更加注重语意，所谓的语意就是样式和内容的相关程序。

在前面举到例子中，要实现销售记录一览，使用ul或者dd dt dl虽然可以实现想要的效果，但是如果不过表现，只看HTML代码的话，很明显，这堆代码基本上语意比较差，或者说单看HTML代码看不出你想要表达什么样的效果。在Web标准中，列举数据元素时，最好使用table元素来实现，这才是table的用武之地。在这一节里，我们就尝试使用table来实现复杂的柱状图效果。不过已经有人早就尝试过这个试验了（CSS Vertical Bar Graphs），为了和本节形成比照，前面的例子也是按照这个效果制作的。

首先来看一下运行的效果图：

在技术上来说，如果我们去除各个标签的本来含义，只把它们看作是XHTML中的普通元素的话，我们会发现其实无论使用什么标签，在实际操作上都差不多。我们之所以选择不同的标签是因为在表达上的需要，但从技术上说，它们只是普通元素。

本文还是以前面文章设计的案例来讲，在阅读本文前，请先查看前面的这篇文章，以免造成理解困难。接下来我们就看看如何一步一步实现这样一个效果。

一、首先打地基——构建HTML代码

  这个很简单，就是做一个XHTML中table标签就可以了：

<table id="q-graph" cellpadding="0" cellspacing="0">  
<caption>某公司2007年1~4季度南北区域销售情况对照表（单位：万件）</caption>  
<thead>  
    <tr>  
        <th></th>  
     <th class="north">北方</th>  
     <th class="south">南方</th>  
 </tr>  
</thead>  
<tbody>  
    <tr id="q1">  
        <th scope="row">Q1</th>  
       <td class="north bar" style="height:111px">18</td>  
        <td class="south bar" style="height:99px">16</td>  
 </tr>  
   <tr id="q2">  
        <th scope="row">Q2</th>  
       <td class="north bar" style="height:198px">32</td>  
        <td class="south bar" style="height:210px">34</td>  
    </tr>  
   <tr id="q3">  
        <th scope="row">Q3</th>  
       <td class="north bar" style="height:260px">43</td>  
        <td class="south bar" style="height:198px">32</td>  
    </tr>  
   <tr id="q4">  
        <th scope="row">Q4</th>  
       <td class="north bar" style="height:111px">18</td>  
        <td class="south bar" style="height:198px">32</td>  
    </tr>  
</tbody>  
</table>

  在这段代码没有什么特别之处，只不过注意一下scope="row",一般情况下，表头应该使用<th>来指明，不过当<th>既是表头又是表格数据的时候，就要使用scope加以说明 。scope属性通常可以连接表格数据单元格和表头，它有四个属性值row、col、rowgroup、colgroup分别代表定义行表头、列表头、行组的表头和列组的表头。