效果图：

实现代码：

<!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. .gitignore文件配置：keil工程文件类型【转】

    本文转载自:https://blog.csdn.net/u010160335/article/details/80043965 .gitignore源文件下载链接:git管理keil工程.gitign ...

  2. Python爬虫 —— 抓取美女图片

    代码如下: #coding:utf-8 # import datetime import requests import os import sys from lxml import etree im ...

  3. 51nod 1040

    题目 题解:我们要求的是这个式子: $ \sum\limits_{i = 1}^n {\gcd (n,i)}  $ (下面式子中的d都是n的因子) 变形下  $ \sum\limits_{d = 1} ...

  4. 基于对话框的Opengl框架

    转自:http://blog.csdn.net/longxiaoshi/article/details/8238933 12-11-29 14:55 1198人阅读 评论(6) 收藏 举报  分类: ...

  5. python的try...except

    try/except与其他语言相同,在python中,try/except语句主要是用于throw程序正常执行过程中出现的异常,如语法错(python作为脚本语言没有编译的环节,在执行过程中对语法进行 ...

  6. python-多线程2-线程同步

    线程同步: 一个场景: 一个列表里所有元素都是0,线程A从后向前把所有元素改成1,而线程B负责从前往后读取列表并打印. 那么,可能线程A开始改的时候,线程B便来打印列表了,输出就变成一半0一半1,这就 ...

  7. linux 网络编程 inet_pton & inet_ntop函数

    #include <arpa/inet.h> int inet_pton(int family,const char * strptr,void * addrptr); 返回:--成功, ...

  8. Visual Studio 2012 与此版本的 Windows 不兼容 解决

    警告: [Window Title] 程序兼容性助手[Main Instruction] 此程序存在已知的兼容性问题[Expanded Information] Visual Studio 2012 ...

  9. 1111 Online Map (30)（30 分）

    Input our current position and a destination, an online map can recommend several paths. Now your jo ...

  10. 关于ng-class中添加多个样式类的解决方案

    想要达到ng-class的效果,有两种写法 1.class=“{{class}} class1 class2” 2.ng-class="{true: 'active', false: 'in ...