colspan和rowspan合并单元格
最近在回顾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合并单元格的更多相关文章
- table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)
直接上代码,原理之前的随笔已经讲过了.http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果 2.html代码,含js代码 2.1 common.js ...
- easyui datagrid 合并单元格
整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...
- 带复杂表头合并单元格的HtmlTable转换成DataTable并导出Excel
步骤: 一.前台JS取HtmlTable数据,根据设定的分隔符把数据拼接起来 <!--导出Excel--> <script type="text/javascript&qu ...
- 议:如何将树形菜单形式的数据转化成HTML的二维表(相同内容需合并单元格)
一般做OA类管理系统,经常涉及到“组织架构”的概念,那么像这种有上下层级关系的数据一般会做成树形菜单的方式显示,底层代码必定会用到递归算法.这篇随笔的目的就是要谈谈除了用树形菜单来显示这种上下层级关系 ...
- JS实现EasyUI ,Datagrid,合并单元格功能
为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...
- easyui 自动动态合并单元格
.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...
- bootstrap-table方法之:合并单元格
方法一 通过mergeCells方法 演示地址:http://issues.wenzhixin.net.cn/bootstrap-table/methods/mergeCells.html Merge ...
- bootstrapTable 合并单元格
/** * 合并单元格 * @param data 原始数据(在服务端完成排序) * @param fieldName 合并属性名称 * @param colspan 合并列 * @param tar ...
随机推荐
- 《effective c++》读书笔记(上)
最近在读<Effective C++>,确实是经典之作,但是有的条款也需要一些细节补充,所以都列在这篇文章里,希望能不断更新,个人阅读的是第三版,不包括C++ 11的内容. 条款1:视C+ ...
- WPF控件相对位置解析
WPF控件相对位置的获取方法是比较简单的.对于初学者来说,掌握这一技巧的应用,可以帮助以后对WPF的深入学习,而且在实际使用中,这是一个非常常用的方法. 我们知道WPF有着比较灵活的布局方式,关于某个 ...
- c++ inline 的位置不当导致的 无法解析的外部符号
这几天编写代码碰到 无法解析的外部符号 visual studio. 在类中 inline 修饰符应该放在类函数定义的时候而不是声明的地方 即 // test.h 头文件 class A { publ ...
- Android Studio 2.3.2 下载 - 百度网盘
Android Studio是一个为Android平台开发程序的集成开发环境,其包含用于构建Android应用所需的所有工具. Android Studio 2.3.2为最新的稳定版(截止到2017年 ...
- Android学习——文件存储
在Andriod开发中,文件存储和Java的文件存储类似.但需要注意的是,为了防止产生碎片垃圾,在创建文件时,要尽量使用系统给出的函数进行创建,这样当APP被卸载后,系统可以将这些文件统一删除掉.获取 ...
- windows下安装配置RabbitMQ
安装部署 1.当前环境以及参考资料出处 部署环境:windows server 2008 r2 enterprise 官方安装部署文档:http://www.rabbitmq.com/install- ...
- Linux 安装问题
问题1: root>sudo apt-get install yum 提示: dpkg was interrupted, you must manually run 'sudo dpkg --c ...
- python 线程中的局部变量ThreadLocal
一个线程使用自己的局部变量比使用全局变量好局部变量只有线程自己能看见,不会影响其他线程全局变量的修改必须加锁 ThreadLocal 线程局部变量 import threading # 创建全局Thr ...
- Ubuntu16.04使用所遇问题记录
记录笔者在使用Ubuntu系统过程中所遇到过的错误/问题和解决方案.本机系统为Ubuntu 16.04 LTS,64-bit. 目前已有的解决方案: (1)Ubuntu安装搜狗输入法 (2)Windo ...
- Linux硬盘扩容
1.安装gparted分区工具 2.从虚拟机设置新的虚拟硬盘 3.挂载分区 sudo mount -t ext4 /dev/sdb1 /home/zhoushuo/zsdf -hsudo chmod ...