最近在回顾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. Git学习-Git时光机之版本回退(二)

    Git,是Linus花了两周时间用C写的一个分布式版本控制系统.牛人该怎么定义? 零.结论先行 倒叙总结一下: HEAD指向的版本就是当前版本,因此,Git允许我们在版本的历史之间穿梭,使用命令git ...

  2. 【JAVA语法】04Java-多态性

    多态性 instanceof 关键字 接口的应用 一.多态性 1.多态性的体现: 方法的重载和重写 对象的多态性 2.对象的多态性: 向上转型: 程序会自动完成 父类 父类对象 = 子类实例 向下转型 ...

  3. java.langThrowable:STACKTRACE

    Jboss版本是4.2.0.GA代码运行完后总报错 但是程序的运行结果没问题 请问下这是什么原因2009-12-11 01:53:26,611 INFO  [org.jboss.resource.co ...

  4. 纯CSS画的基本图形

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  5. [EffectiveC++]item35:考虑virtual函数以外的其他选择

    本质上是说了:   Template Pattern & Strategy Pattern 详细见<C++设计模式 23种设计模式.pdf 55页> 宁可要组合 不要继承. ——— ...

  6. 475. Heaters (start binary search, appplication for binary search)

    Winter is coming! Your first job during the contest is to design a standard heater with fixed warm r ...

  7. 阅读MySQL文档第21章摘抄

    触发程序是与表相关的数据库对象. mysql> CREATE TABLE account (acct_num INT, amount DECIMAL(10,2)); Query OK, 0 ro ...

  8. android 智能提示

    <AutoCompleteTextView android:id="@+id/autoCompleteTextView" android:completionThreshol ...

  9. 7、springmvc的自动配置

    1.springmvc的自动配置 文档:https://docs.spring.io/spring-boot/docs/2.1.1.RELEASE/reference/htmlsingle/#boot ...

  10. 计算机名称和IP地址

    获取本地IP地址 得到远程机IP地址与描述 若仅仅是查看IP地址