【WEB标准】CSS定义数据表格

表格正在慢慢恢复其原来的用途，也就是显示表格数据，而不是用来进行页面布局，且简单的表格也要包含多行多列，阅读起来非常的不便，如果是使用屏幕阅读器的人来说更是复杂和混乱，不过(X)HTML规范提供了许多元素和属性来提高数据表格对于这些设备的可访性。 

先给大家介绍几个常用标签，对于设计表格来说我觉得是很不错的

1. <caption>用于表格的标题
2. <table summary="对表格的描述">summary是表格中的一个属性，其功能相当于IMG标签中的ALT属性值，建议大家设置。
3. <thead>表格的头标签<tfoot>表格的尾标签，这两个标签在一个表格中只可以出现一次，且两个标签之间至少要有一个<tbody>，这三个标签可以使开发人员能够将表格划分为逻辑部分且可以对特殊区域单独设定样式。
4. <colgroup><col>元素，<colgroup>能够对使用<col>元素定义的一个或多个列进行分组，遗憾的是，支持这两个元素的浏览器并不多。

 下面我们利用上面涉及到的元素来重新定义表格：

在这里大家注意cellspacing是用来去掉单元格的默认填充的属性，在CSS中border-spacing也是控制单元格之间的距离的，但是IE6或更低版本不支持这个属性，我们还是要在表皮层中添加cellspacing来去掉单元格默认填充。
<table cellspacing="0" id="listtable" summary="这是定义员工信息的表格数据">
<caption>这是员工信息表</caption>
<colgroup>
      <col />
     <col  />
     <col  />
     <col  />
</colgroup>
<thead>
    <tr>
          <th id="listhead" scope="col">员工编号</th>
          <th scope="col">员工姓名</th>
          <th scope="col">员工年龄</th>
          <th scope="col">员工电话</th>
    </tr>
</thead>
<tbody>
    <tr class="odd">
          <td>0001</td>
          <td>王晓庆</td>
          <td>24</td>
          <td>789661289</td>
    </tr>
    <tr >
          <td>0002</td>
          <td>张小妹</td>
          <td>7</td>
          <td>789680900</td>
    </tr>
    <tr class="odd">
          <td>0003</td>
          <td>张晓勇</td>
          <td>22</td>
          <td>7543561289</td>
    </tr>
</tbody>
</table>

在页面应用CSS样式

table{ border-collapse:collapse; width:760px; border:1px solid #666;}   /* border-collapse将单元格表框进行合并使相邻单元格共用一个边框 */
th,td{ padding:1px 1px;}
caption{ font-size:13px; font-weight:bold; margin:1px 0;}
col{ border-right:1px solid #ccc;}  /*这是设置每列的右侧单元格的边线但是IE不支持*/
thead{ background:url(images/bg.gif) repeat-x; border-top:1px solid #a5a5a5; border-bottom:1px solid #a5a5a5}
th{ font-weight:normal; text-align:left;}
.odd{ background:#edf5ff;}

最后我们在添加上鼠标停留改变行颜色的效果，但是遗憾的是IE不支持
tr:hover{ background:#3d80df; color:#fff;}
thead tr:hover{ background:transparent; color:inherit;}