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

爱程序网

Tags：[db:关键字]