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