效果图：

实现代码：

<!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. java图形界面设计

    1.       基本的java Frame操作. Java的图形界面的类主要包括AWT和Swing.在AWT中图形元素的父类为Component. 继承关系如下:Component->Cont ...

  2. Spring Boot2.0之整合log4j

    传统方式打印日志比较复杂, 每次打印需要定义全局变量 private static final Logger logger = LoggerFactory.getLogger(SjpControlle ...

  3. laravel基础课程---8、laravel响应和视图（响应是什么）

    laravel基础课程---8.laravel响应和视图(响应是什么) 一.总结 一句话总结: 就是向请求返回的响应数据(一般为html(视图),当然也可以是变量值):所有的路由及控制器必须返回某个类 ...

  4. struts2标签（转）

    Struts2 标签库讲解   要使用Struts2的标签,只需要在JSP页面添加如下一行定义即可: <%@ taglib prefix="s" uri="/str ...

  5. 'QObject& QObject::operator=(const QObject&)' is private——无法将自定义的QObject子类放入Qt容器（container）中

    先贴出问题的代码: #include<QCoreApplication> classMyObject:publicQObject { public: MyObject(QObject*pa ...

  6. 集训Day1

    雅礼集训2017Day1的题 感觉上不可做实际上还挺简单的吧 T1 区间加 区间除法向下取整 查询区间和 区间最小值 大力上线段树,把除法标记推到底,加法标记就是按照线段树的来 先拿30 然后60的数 ...

  7. GET和POST的区别及get和post关于请求的编解码的问题

    GET和POST的本质区别是什么?        使用GET,form中的数据将编码到url中,而使用POST的form中的数据则在http协议的header中传输.在使用上,当且仅当请求幂等(字面意 ...

  8. 创建maven parent project & module project

    1.命令方式: 1)Create the top-level root: mvn archetype:generate -DarchetypeGroupId=org.codehaus.mojo.arc ...

  9. 项目清理和删除svn信息（转）

    svn信息是根据文件夹里面的 .svn 文件夹保存相关配置的,删除此文件夹即可去掉svn信息: linux下: find . -type d -name ".svn"|xargs ...

  10. TCP 登录实现代码

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.i ...