最近在回顾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. windows 打印刻录 代码规范及问题

    1.获取CString字节数 int z_Len = WideCharToMultiByte(CP_ACP, 0, z_FileXml.GetBuffer(), z_FileXml.GetLength ...

  2. 第三次Scrum编码冲刺

    1.小组成员 周 斌 舒 溢 许嘉荣 唐 浩 黄欣欣 廖帅元 刘洋江 薛思汝 2.个人在小组第三次冲刺的任务及其完成情况描述. 这次小组活动中我负责测试程序的实现情况,确保程序的每个模块都能正常运行, ...

  3. sqlserver索引维护(重新组织生成索引)

    sqlserver索引的维护 1:查看索引碎片大于百分三十以上的索引 select object_id= object_id,indexid = index_id,partitionnum = par ...

  4. 【Leetcode】【Medium】Convert Sorted Array to Binary Search Tree

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 解题 ...

  5. Thread.Join()的详解

    什么是进程?当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的. 什么是线程?线程是程序中的一个执行流,每个线程都有自己的专有寄 ...

  6. Win10安装msi程序报错2503和2502错误解决方案

    刚升级了系统到win10,重新搭建开发环境,在安装scala的时候一直报2503.2502错误,如图 试了好几种办法都不好使,现在罗列依次用到的三种方法: 一.命令提示符(管理员)启动 "w ...

  7. 可用的rtmp卫视直播地址

    http://blog.csdn.net/chinabinlang/article/details/45092297[ 可用的rtmp卫视直播地址] http://blog.csdn.net/chin ...

  8. Windows环境双系统安装环境配置

    (最惊喜的事情莫过于...在安装系统完成重新试图安装Docker时解决了关于HyperV的问题,结果提示Docker只能在Win10 Pro或者Enterprise环境下运行...我很坚强...可以按 ...

  9. AngularJs学习笔记--Scope

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/scope 一.什么是Scope? scope(http://code.angularjs.org/1. ...

  10. BZOJ4887:[TJOI2017]可乐(矩阵乘法)

    Description 加里敦星球的人们特别喜欢喝可乐.因而,他们的敌对星球研发出了一个可乐机器人,并且 放在了加里敦星球的1号城市上.这个可乐机器人有三种行为:停在原地,去下一个相邻的 城市,自爆. ...