数据分析，一般都需要显示数据，就需要使用html做复杂的表格。复杂表格一般是对td的rowspan 、colspan属性值。

在html中<td> 标签定义 HTML 表格中的标准单元格。

　　(1)rowspan 属性规定单元格可横跨的行数;

　　(2)colspan 属性规定单元格可横跨的列数。

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     <title>复杂表格</title>

 </head>

 <body>

     <center>

         <table width = "20%" border="1">

             <tr>

                 <th>网站</th>

                 <th colspan="2">统计情况</th>    <!-- colspan="2"  占位,表示这一列占2列 -->

             </tr>

             <tr>

                 <td rowspan="3">奇虎360</td>    <!-- rowspan="2"  占位,表示这一列占3行 -->

                 <td>http://hao.360.cn/</td>

                 <td>11</td>

             </tr>

             <tr>

                 <td>http://sh.qihoo.com/</td>

                 <td>22</td>

             </tr>

             <tr>

                 <td>http://video.so.com/</td>

                 <td>33</td>

             </tr>

         </table>

     </center>

 </body>

 </html>

显示：

rowspan 、colspan 可以理解为占位。占行数、列数。

html 制作复杂table的更多相关文章

  1. 利用js制作html table分页示例(js实现分页)

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...

  2. 我的第六个网页制作：table标签

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. html 表格的制作

    表格的制作 表格<table></table> <table  width=""  height=""  align=" ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统（41）-组织架构

    系列目录 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当初设计的项目解决方案就是可伸缩可以拆离,可共享的项目解决方案.所以我们同时要添加App.Flow文件夹 ...

  5. X5的UI部分和传统Web页面开发的差异

    http://doc.wex5.com/different-with-std-web-ui/#1 X5的UI部分和传统Web页面开发的差异 WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速 ...

  6. CSS書寫規範及CSS Hack

    基本原则: CSS样式可细分为3类:自定义样式.重新定义HTML样式.链接状态样式. 样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中局部的样式设定. 样式名 “.”+“相 ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（41）-组织架构

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(41)-组织架构 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当 ...

  8. 利用USearch去除嵌合体(chimeras)

    嵌合体序列指在pcr过程中,两条不同的序列产生杂交扩增的序列,属于人工污染,在ITS和16S分析中,应该首先去除,USearch提供去除嵌合体的功能 usearch -uchime_ref reads ...

  9. html笔记第一天

    快速生成标签有序ol>li*3无序ul>(li>a{新闻标题})*3定义列表 dl>(dt+dd)*3制作表格table>(tr>td*5)*6pading:3个数 ...

随机推荐

  1. 基于 Laravel 开发博客应用系列 —— 从测试开始（一）：创建项目和PHPUnit

    1.创建博客项目 我们将遵循上一节提到的六步创建一个新 Laravel 5.1 项目的步骤,创建本节要用到的博客项目 —— blog. 首先,在本地主机安装应用骨架: nonfu@ubuntu:~/C ...

  2. react-native第一次开发记录

    1.安装指定版本 react-native init demo --verbose --version 0.41.0 2.更新依赖包 npm install -g npm-check-updates ...

  3. poj1730 - Perfect Pth Powers（完全平方数）（水题）

    /* 以前做的一道水题,再做精度控制又出了错///... */ 题目大意: 求最大完全平方数,一个数b(不超过int范围),n=b^p,使得给定n,p最大: 题目给你一个数n,求p : 解题思路: 不 ...

  4. NetCore+Dapper WebApi架构搭建（四）：仓储的依赖注入

    上一节我们讲到实体,仓储接口和仓储接口的实现需要遵循约定的命名规范,不仅是规范,而且为了依赖注入,现在我们实现仓储的依赖注入 在NetCore WebApi项目中新添加一个文件夹(Unit),当然你也 ...

  5. spring4声明式事务—02 xml配置方式

    1.配置普通的 controller,service ,dao 的bean. <!-- 配置 dao ,service --> <bean id="bookShopDao& ...

  6. [ 原创 ] Java基础9--final throw throws finally的区别

    final修饰的类不可被继承,final修饰的方法可以被继承但不能被重写(覆盖) final用于可以声明属性和方法,分别表示属性的不可变及方法的不可覆盖.不是方法的不可继承 throw是用来明确地抛出 ...

  7. 表单验证插件validate

    http://www.runoob.com/jquery/jquery-plugin-validate.html <!DOCTYPE html> <html lang="e ...

  8. 数据库中drop、delete与truncate的区别

    数据库中drop.delete与truncate的区别 drop直接删掉表: truncate删除表中数据,再插入时自增长id又从1开始 :delete删除表中数据,可以加where字句. (1) D ...

  9. 80X86指令总结

    一.数据传送指令 指令名称 汇编语句格式 功能 影响标志位 传送move data mov opd, ops (ops) → opd:分为主存储器.通用寄存器.段寄存器,不可同时使用主存储器,类型要匹 ...

  10. Git 简易使用指南及补充

    Git最简易的使用指南 助你开始使用 git 的简易指南,木有高深内容,;) 安装 下载 git OSX 版 下载 git Windows 版 下载 git Linux 版 创建新仓库 创建新文件夹, ...