最近在回顾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. idea 多项目部署JRebel

    碰到个问题,Jrebel热部署Idea,两个项目一个可以热部署,一个不行.刚开始发现是其中一个项目没有添加JRebel,于是加上 然而发现还是不行,继续google, 在一篇文章里面发现如下的内容: ...

  2. Android Studio最新稳定版下载 - 百度网盘(更新于2017年7月14日)

    Android Studio是一个为Android平台开发程序的集成开发环境,其包含用于构建Android应用所需的所有工具.Android Studio 2.3.3为最新稳定版(截止到2017年7月 ...

  3. Studying TCP's Congestion Window using NS

    Studying TCP's Congestion Window using NS How to obtain TCP's CWND value The most important value th ...

  4. tomcat运行报错Failed to start component [StandardEngine[Catalina].StandardHost[localhost].

    tomcat运行报错Failed to start component [StandardEngine[Catalina].StandardHost[localhost].多半情况是找不到jar包 解 ...

  5. QT网络编程Tcp下C/S架构的即时通信

    先写一个客户端,实现简单的,能加入聊天,以及加入服务器的界面. #ifndef TCPCLIENT_H #define TCPCLIENT_H #include <QDialog> #in ...

  6. DedeCms织梦后台管理员密码修改和忘记重置方法

    方法/步骤 打开dede_admin数据表: 进入你的MYSQL后台,然后在你的数据库名中,找到dede_admin这项如图,pwd下的值就是你的密码,织梦密码采取的是MD5加密,破解麻烦而且没有必要 ...

  7. Master的注册机制和状态改变管理解密

    本课主题 Master 接收 Worker, Driver, Application 注册 Master 处理 Driver 狀态变换 Master 处理 Executor 狀态变换 Master 接 ...

  8. Effective Java 第二版 Enum

    /** * Effective Java 第二版 * 第30条:用enum代替int常量 */ import java.util.HashMap;import java.util.Map; publi ...

  9. macbook pro 2016 2017 15寸 雷电3 外接显卡 epu 简单教程(不修改UEFI)

    雷电3外接显卡效果还不错,但是除了akitio node 其他厂家并不会维护自己的固件来适配新机型,我自己买的mbp 2016 15''就出现了和AORUS Gaming Box 1070不兼容的问题 ...

  10. JAVA串口开发帮助类分享-及写在马年末

    摘要: 在系统集成开发过程中,存在着各式的传输途径,其中串口经常因其安全性高获得了数据安全传输的重用,通过串口传输可以从硬件上保证数据传输的单向性,这是其它介质所不具备的物理条件.下面我就串口java ...