效果图：

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#all {
width: 1000px;
height: 100px;
}

.biaoge {
width: 103px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div id="all">

<div class="biaoge">
<table border="1" cellspacing="0" width="100px" height="100px">
<tr>
<td rowspan="2" bgcolor="blue">11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>

<td>22</td>
<td>23</td>
</tr>
</table>
</div>
<div class="biaoge">
<table border="1" cellspacing="0" width="100px" height="100px">
<tr>
<td colspan="3" bgcolor="blue">11</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
</div>
<div class="biaoge">
<table border="1" cellspacing="0" width="100px" height="100px">
<tr>
<td rowspan="2" bgcolor="blue">1</td>
<td>2</td>
<td colspan="2" bgcolor="blue">3</td>

</tr>
<tr>

<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</div>
<div class="biaoge">
<table border="1" cellspacing="0" width="100px" height="100px">
<tr>
<td>A</td>
<td rowspan="2">B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">E</td>
<td>D</td>
</tr>
<tr>
<td colspan="2">F</td>
</tr>
</table>
</div>
</div>
</body>
</html>

html表格合并单元格的运用实例的更多相关文章

  1. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  2. 使用POI创建word表格合并单元格兼容wps

    poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...

  3. js 表格合并单元格

    5列  根据需要可添加 或 删除 strOneTemp  strTwoTemp  strThreeTemp  strFourTemp  strFiveTemp //合并单元格  this.mergeC ...

  4. elementUI表格合并单元格

    相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门 但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rows ...

  5. display:table表格合并单元格

    直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  6. html表格合并单元格

    th标签 合并列 colspan="k" 合并行 rowspan="k"   例子<th colspan="2", rowspan=& ...

  7. 表格合并单元格【c#】

    gridBranchInfo.DataSource = dtBranchViewList; gridBranchInfo.DataBind(); Random random = new Random( ...

  8. layui：数据表格如何合并单元格

    layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...

  9. 【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器的内容换行

    1.常用表格标签 普通    <table>           |           <tr>          |           |          <th ...

随机推荐

  1. BZOJ 1634 [Usaco2007 Jan]Protecting the Flowers 护花：贪心【局部分析法】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1634 题意: 约翰留下他的N只奶牛上山采木.可是,当他回来的时候,他看到了一幕惨剧:牛们正 ...

  2. Linux 中安装软件报缺少共享库文件的错误

    linux 安装一些如软件 或者相关的模块时,经常报出缺少一些依赖包的 libxxx.so等的共享库文件 首先找到 该共享库文件 然后查看/etc/ld.so.conf 这个文件记录了编译时使用的动态 ...

  3. multitail

    multitail 在分隔的窗口查看你的日志

  4. DB2 Error Messages (Sorted by SQLCODE)

    DB2 Error Messages (Sorted by SQLCODE) DB2 Error Messages (Sorted by SQLCODE) SQLCODE SQLSTATE Descr ...

  5. windows平台下新网络库RIO ( Winsock high-speed networking Registered I/O)

    What's New for Windows Sockets Microsoft Windows 8 and Windows Server 2012 introduce new Windows Soc ...

  6. Ubuntu候选栏乱码

    解决方案 cd ~/.config rm -rf SogouPY* sogou* 注销重新登录就可以

  7. C++源码学习

    C/C++是最主要的编程语言.这里列出了50名优秀网站和网页清单,这些网站提供c/c++源代码.这份清单提供了源代码的链接以及它们的小说明.我已尽力包括最佳的C/C++源代码的网站.这不是一个完整的清 ...

  8. 什么是BI（Business Intelligence）

    一.BI的定义 BI是Business Intelligence的英文缩写,中文解释为商务智能,用来帮助企业更好地利用数据提高决策质量的技术集合,是从大量的数据中钻取信息与知识的过程.简单讲就是业务. ...

  9. java——static声明方法注意事项

    在使用 static 类型声明的方法时需要注意的是:如果在类中声明了一 static类型的属性,则此属性既可以在非 static 类型的方法中使用,也可以在 static类型的方法中使用.但用 sta ...

  10. Linux下磁盘加密luks使用

    使用luks加密磁盘,磁盘需要映射才可以挂载,映射的时候需要输入密码验证.luks相对于是对硬盘上了一把锁,要想打开就得有相应的钥匙,如果打开了就可以随意操作了,和普通硬盘一样. 使用方法如下: 0. ...