最近在回顾html的时候,经常碰到一些table标签的问题,其中大多数都是合并单元格,所以在这里记录下自己的探究过程:

 <table cellpadding="0" cellspacing="0" border="1" width="200px" height="100px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

  上面是我创建的一个常规表格,在这里回顾下table内的几个属性:

  • cellpadding:规定单元格边界与单元格内容之间的间距
  • cellspacing:规定单元格与单元格之间的间距
  • border:表格的边框

现在我想实现单元格2与单元格3合并,如下图:

我们知道:将多个单元格合并的时候,会产生多余的单元格,这时候需要把多余的单元格删除,否则会影响表格的结构

<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>

  在单元格2上添加colspan="2",即合并两个列单元格,这时候把<td>3</td>删除。

  类似的:单元格1与单元格4合并

<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>

  如有错误,欢迎指出~

colspan和rowspan合并单元格的更多相关文章

  1. table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  2. DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)

    直接上代码,原理之前的随笔已经讲过了.http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果 2.html代码,含js代码 2.1 common.js ...

  3. easyui datagrid 合并单元格

    整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...

  4. 带复杂表头合并单元格的HtmlTable转换成DataTable并导出Excel

    步骤: 一.前台JS取HtmlTable数据,根据设定的分隔符把数据拼接起来 <!--导出Excel--> <script type="text/javascript&qu ...

  5. 议:如何将树形菜单形式的数据转化成HTML的二维表(相同内容需合并单元格)

    一般做OA类管理系统,经常涉及到“组织架构”的概念,那么像这种有上下层级关系的数据一般会做成树形菜单的方式显示,底层代码必定会用到递归算法.这篇随笔的目的就是要谈谈除了用树形菜单来显示这种上下层级关系 ...

  6. JS实现EasyUI ,Datagrid,合并单元格功能

    为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...

  7. easyui 自动动态合并单元格

    .......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...

  8. bootstrap-table方法之:合并单元格

    方法一 通过mergeCells方法 演示地址:http://issues.wenzhixin.net.cn/bootstrap-table/methods/mergeCells.html Merge ...

  9. bootstrapTable 合并单元格

    /** * 合并单元格 * @param data 原始数据(在服务端完成排序) * @param fieldName 合并属性名称 * @param colspan 合并列 * @param tar ...

随机推荐

  1. Python学习系列-----第二章 操作符与表达式

    2.1 数学运算和赋值的简便方法 例如: 2.2 优先级 在python中运算符有优先级之分,高优先级的运算符先执行,低优先级的运算符后执行.下面是运算符优先级:(同一行的运算符具有相同的优先级) 2 ...

  2. idea 出现 java.noSuchMechodFound

    公司 用了多个项目来相互之间形成依赖.每次修改或者添加新功能,会升级版本.用的是maven,这几天 一直 出现一个问题就是:本地 升级版本完后 使用 git命令 mvn -deploy -e 打包后, ...

  3. c++ inline 的位置不当导致的 无法解析的外部符号

    这几天编写代码碰到 无法解析的外部符号 visual studio. 在类中 inline 修饰符应该放在类函数定义的时候而不是声明的地方 即 // test.h 头文件 class A { publ ...

  4. java几种基本排序算法

    1.选择排序 原理:将数组的每一个元素和第一个元素相比较,如果小于第一个元素则交换,选出第一小的,依次选出第二小,第三小的.... 代码 int[] a = {1,3,2,5}; int i,j,te ...

  5. ORACLE 角色授权

    直接例子: 1.CREATE USER 用户名 identified by 密码 default tablespace 表空间名;GRANT CONNECT TO 用户名; GRANT RESOURC ...

  6. MVC的验证(模型注解和非侵入式脚本的结合使用)

    @HtmlHrlper方式创建的标签,会自动生成一些属性,其中一些属性就是关于验证 如图示例: 模型注解 通过模型注解后,MVC的验证,包括前台客户端,后台服务器的验证,MVC统统都做了包含,即使用户 ...

  7. 网络协议HTTP TCP/UDP 浏览器缓存 Restful(十)

    一 TCP网络协议 1 建立TCP连接:三次握手原则 客户端通过向服务器端发送一个SYN来创建一个主动打开,作为三次握手的一部分.客户端把这段连接的序号设定为随机数 A. 服务器端应当为一个合法的SY ...

  8. [Errno 14] problem making ssl connection Trying other mirror.

    使用yum安装程序,报错 解决方法: 我的是升级了下curl就可以了   yum update curl

  9. python 类属性及限制

    Student类本身需要绑定一个属性直接在class中定义属性,这种属性是类属性,归Student类所有:class Student(object): name = 'Student'类的所有实例都可 ...

  10. 【转载】Kali-linux安装之后的简单设置

         1.更新软件源:修改sources.list文件:leafpad /etc/apt/sources.list然后选择添加以下适合自己较快的源(可自由选择,不一定要全部): #官方源deb h ...