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 ...
随机推荐
- QML Delegate中访问该持有者的方式 附加属性(转载)
http://blog.csdn.net/yuxiaohen/article/details/17226971 用法很奇葩记录一下,实测可以,用于弱化delegate与持有者的依赖 delegat ...
- webstorm中使用git
webstorm中使用git将代码放入tfs两种方式: 直接在tfs上建立仓库,复制仓库地址,然后在本地打开webstorm,然后git克隆这个仓库 使用git命令将本地项目上传到tfs git re ...
- 修改虚拟机ip备份
修改虚拟机ip 因为别人写的很好,在此备份一下.
- CSS animation online生成工具
利用HTML5.css的一些动画功能,可以设计出非常炫酷的动画,但是由于并不是所有的浏览器都支持,所以可能需要prefix,这个过程是比较烦的.一个比较好用的线上工具: http://matthewl ...
- SQLServer 2008 新增T-SQL 简写语法
1.定义变量时可以直接赋值 DECLARE @Id int = 5 2.Insert 语句可以一次插入多行数据 INSERT INTO StateList VALUES(@Id, 'WA'), (@I ...
- stream操作 z
常见并常用的stream一共有 文件流(FileStream), 内存流(MemoryStream), 压缩流(GZipStream), 加密流(CrypToStream), 网络流(NetworkS ...
- Spring注解开发-全面解析常用注解使用方法之组件注册
目录 1. @Configuration 2. @ComponentScan excludeFilters includeFilters 使用自定义TypeFilter 3. @Bean @Scope ...
- python3.6安装总结
安装Python 3.6 过程中出现了一些问题,导致费时费力.因此把自己安装过程中出现的问题写出来,以备大家查看. 第一步:比较简单的一种安装方法是直接安装Anacanda3 python即可,这时可 ...
- OKEX期现对冲JS源代码分享(基于Fmz, Botvs实现)
什么是期现对冲?此策略风险和收益如何?期现对冲是利用期货和现货之间存在的差价进行套利.因为在交割日的时候,期货会按现货价格成交,当期货和现货一旦出现差价时,就可以通过做空期货做多现货(或做多期货卖出现 ...
- 对EJB的认识
对EJB的认识 接触EJB以来有一段时间了,走马观花一样把它所涉及到的东西看了一遍,随着深入了解越来越感觉到ejb的很强大,用了java后觉的java好用.学历SSH觉的比java好用.学了ejb觉的 ...