html 制作复杂table

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

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

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

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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5     <title>复杂表格</title>
 6 </head>
 7 <body>
 8     <center>
 9         <table width = "20%" border="1">
10             <tr>
11                 <th>网站</th>
12                 <th colspan="2">统计情况</th>    <!-- colspan="2"  占位,表示这一列占2列 -->
13             </tr>
14             <tr>
15                 <td rowspan="3">奇虎360</td>    <!-- rowspan="2"  占位,表示这一列占3行 -->
16                 <td>http://hao.360.cn/</td>
17                 <td>11</td>
18             </tr>
19             <tr>
20                 <td>http://sh.qihoo.com/</td>
21                 <td>22</td>
22             </tr>
23             <tr>
24                 <td>http://video.so.com/</td>
25                 <td>33</td>
26             </tr>
27         </table>
28     </center>
29 </body>
30 </html>

显示:

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

时间: 2024-10-03 10:08:10

html 制作复杂table的相关文章

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

有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var direct=0; //方向 var len; //总行数 var page; //总页数 var begin; var end; $(docume

我的第六个网页制作:table标签

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>这是我的第五个html代码</title> 6 <!--可以通过bgcolor关键字修改背景颜色--> 7 <body bgcolor="#FF0000"> 8 <table border="1px" cel

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

原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(41)-组织架构 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当初设计的项目解决方案就是可伸缩可以拆离,可共享的项目解决方案.所以我们同时要添加App.Flow文件夹 工作流的开始之前,我们必须有一个组织架构,我们做成无限动态级别树,因为之前的模块管理也是无限级别的 知识点:Easyui TreeGrid用法,根据组织架构读取架构下所有用户(with...as.

HTML5-入门2。

 文本样式 <b>加粗</b> <i>倾斜</i> <u>下划线</u> <s>删除线</s> <sub>下标</sub> <sup>上标</sup> <p>段落元素</p> <br/>强制换行 <hr/>分割线   制作表格 table tr(行) td(列) cellspacing:设置外边距 cellpaddi

利用USearch去除嵌合体(chimeras)

嵌合体序列指在pcr过程中,两条不同的序列产生杂交扩增的序列,属于人工污染,在ITS和16S分析中,应该首先去除,USearch提供去除嵌合体的功能 usearch -uchime_ref reads.fna -db reference.fna -strand plus -nonchimeras nonchimeras.fna usearch 链接:http://drive5.com/usearch/manual/uparse_cmds.html 同时usearch提供更加可靠的聚类方案(未详考

2、第九周 - WEB框架应用 - HTML的初步认识及标签的使用

初步认识HTML结构,及常用的标签 一.HTML结构的认识 1.HTML 结构如下: <!DOCTYPE html> <!-- 定义使用的类型 --> <html lang="en"> <!-- 定义html标签,起始位置 lang="en"叫标签内部属性--> <head> <!-- 头部 --> <meta charset="UTF-8"> <title

制作网页时Div与Table的区别

1.制作效率 我想没人反对表格的制作效率要高于Div的效率.很明显Div布局代码全部都要手写.即使你在熟悉代码,也没有 Dreamweaver生成来的快吧!所以Table可以很容易建立起结构化的界面,通过table自身的参数定义,我们能把页面布局很快定义成我们所需要的效果. 2.浏览器的兼容问题 table和div在兼容问题中,table更具有优势. 我们常用的IE6.0,IE7.0火狐Firefox浏览器对div css设置上非常挑剔,往往同一个css在2种浏览器上会有不同的结果,对设计制作人

Css制作table细线表格

Css制作table细线表格 关键点: table {border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */border:1px solid #999; /* 设置边框属性:样式(solid=实线).颜色(#999=灰) */}

制作一个可以滑动操作的 Table View Cell

Apple 通过 iOS 7 的邮件(Mail)应用介绍了一种新的用户界面方案——向左滑动以显示一个有着多个操作的菜单.本教程将会向你展示如何制作一个这样的 Table View Cell,而不用因嵌套的 Scroll View 陷入困境.如果你还不知道一个可滑动的 Table View Cell 意味着什么,那么看看 Apple 的邮件应用: 可能你会想,既然 Apple 展示了这种方案,那它应该已将其开放给开发者使用了.毕竟,这能有多难呢?但不幸的是,他们只让开发者使用 Delete 按钮—