你的位置:首页 > 网页设计

[网页设计]table表格表头类别分组效果


table表格表头类别分组效果:
表格用来组织数据非常的便利,比如可以按照数据的类别进行或者其他方式有效的组织数据,有时候分类比较复杂,比如大的分类中还包括小的分类,下面就是一段类似的代码实例,希望能够对需要的朋友带来帮助。
代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title></head><body><table border="1"> <caption> 各中心人员饱和程度统计表 </caption> <thead>  <tr class="odd">   <td class="column1"></td>   <th scope="col" colspan="4">部门情况</th>   <th scope="col" colspan="4">外包情况</th>  </tr>  <tr class="odd">   <td class="column1"></td>   <th scope="col">人数</th>   <th scope="col">计划饱和度</th>   <th scope="col">绝对饱和度</th>   <th scope="col">相对饱和度</th>   <th scope="col">人数</th>   <th scope="col">计划饱和度</th>   <th scope="col">绝对饱和度</th>   <th scope="col">相对饱和度</th>  </tr> </thead> <tbody>  <tr>   <th scope="row" class="column1"> <a href="#">信息系统开发部</a> </th>   <td>30</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>   <td>5</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>  </tr>  <tr class="odd">   <th scope="row" class="column1"> <a href="#">业务系统开发部</a> </th>   <td>30</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>   <td>5</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>  </tr>  <tr>   <th scope="row" class="column1"> <a href="#">支撑系统开发部</a> </th>   <td>30</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>   <td>5</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>  </tr>  <tr class="odd">   <th scope="row" class="column1"> <a href="#">运营系统开发部</a> </th>   <td>30</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>   <td>5</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>  </tr>  <tr>   <th scope="row" class="column1"> <a href="#">增值业务开发部</a> </th>   <td>30</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>   <td>5</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>  </tr>  <tr class="odd">   <th scope="row" class="column1"> <a href="#">技术服务部</a> </th>   <td>30</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>   <td>5</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>  </tr>  <tr>   <th scope="row" class="column1"> <a href="#">系统集成部</a> </th>   <td>30</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>   <td>5</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>  </tr>  <tr class="odd">   <th scope="row" class="column1"> <a href="#">质量管理部</a> </th>   <td>30</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>   <td>5</td>   <td>100%</td>   <td>100%</td>   <td>100%</td>  </tr> </tbody></table></body></html>

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0612/4009.html