效果图：

实现代码：

<!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. Android Wifi简单的梳理【转】

    本文转载自:http://blog.csdn.net/gabbzang/article/details/10005411 代表一个已经配置过的网络.包含网络ID(networkId).该网络ID代表的 ...

  2. 打造vim成类source insight

    一.Ubuntu14.04下配置 1.配置vimrc文件 输入:version课查看vimrc文件及位置: system vimrc file: "$VIM/vimrc" user ...

  3. entity framework WithRequiredDependent和WithRequiredPrincipal

    A->WithRequiredDependent->B 表示 A中包含B的不为null实例 ,A是主键实体  B是外键实体 A->WithRequiredPrincipal-> ...

  4. RQNOJ 117 最佳课题选择：多重背包

    题目链接:https://www.rqnoj.cn/problem/117 题意: NaCN_JDavidQ要在下个月交给老师n篇论文,论文的内容可以从m个课题中选择. 由于课题数有限,NaCN_JD ...

  5. 分享知识-快乐自己：搭建第一个 Hibernate （Demo）

    使用 Hibernate 完成持久化操作 七大 步骤: 1.读取并解析配置文件及映射文件: Configuration configuration=new Configuration().config ...

  6. Linux下查看端口占用情况

    用启动服务的账号登录,然后运行命令: lsof -i:<端口号> 也可使用命令: netstat -apn|grep <端口号> 找到进程号以后,再使用以下命令查看详细信息: ...

  7. linux命令学习笔记(24)：Linux文件类型与扩展名

    Linux文件类型和Linux文件的文件名所代表的意义是两个不同的概念.我们通过一般应用程序 而创建的比如file.txt.file.tar.gz ,这些文件虽然要用不同的程序来打开,但放在Linux ...

  8. 【Shell】Linux 一行 多命令

    http://www.cnblogs.com/koreaseal/archive/2012/05/28/2522178.html 要实现在一行执行多条Linux命令,分三种情况: 1.&&am ...

  9. Django | 执行项目下指定的脚本

    1 描述 有时候会碰到这样的场景,对于一些业务升级,我需要把数据库数据做些处理,同时又想以 Django 项目的环境变量执行脚本,这个时候使用 python 脚本是再适合不过的手段了. 2 使用自带的 ...

  10. 使用ubuntu自带的Remmina Remote Desktop Client远程登录服务器配置

    1.配置:点击new , 配置服务器ip地址.名称.密码 2.打开本机终端执行一下命令: echo xfce4-session>.session echo xfce4-session>.x ...