码迷,mamicode.com
首页 > 其他好文 > 详细

table表格表头类别分组效果

时间:2015-07-13 15:58:29      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

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

table表格表头类别分组效果

标签:

原文地址:http://www.cnblogs.com/come-on/p/4642907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!