效果图：

实现代码：

<!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. python清空tree.insert()

    import tkinter from tkinter import ttk # 导入内部包 li = [', '男'] root = tkinter.Tk() root.title('测试') tr ...

  2. BZOJ 1230 [Usaco2008 Nov]lites 开关灯：线段树异或

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1230 题意: 有n盏灯,一开始全是关着的. 有m次操作(p,a,b).p为0,则将区间[a ...

  3. html5--2.1新的布局元素(1)-header/footer

    html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...

  4. 勤于思考：Objective-C特性的扩展

    赋值 assign:直接赋值.默认 @interface Car : NSObject { NSString *_name; } @property (assign,nonatomic) NSStri ...

  5. PS 滤镜— —扇形warp

    clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...

  6. 创建maven多模块项目

    一:创建父项目

  7. ACM学习历程—HDU1584 蜘蛛牌（动态规划 && 状态压缩 || 区间DP）

    Description 蜘蛛牌是windows xp操作系统自带的一款纸牌游戏,游戏规则是这样的:只能将牌拖到比她大一的牌上面(A最小,K最大),如果拖动的牌上有按顺序排好的牌时,那么这些牌也跟着一起 ...

  8. 【LeetCode】042 Trapping Rain Water

    题目: Given n non-negative integers representing an elevation map where the width of each bar is 1, co ...

  9. zk 09之：Curator之二：Path Cache监控zookeeper的node和path的状态

    在实际应用开发中,当某个ZNode发生变化后我们需要得到通知并做一些后续处理,Curator Recipes提供了Path Cache 来帮助我们轻松实现watch ZNode. Path Cache ...

  10. ICU 是一种说不出的痛啊

    USE [Nursing] GO /****** Object: StoredProcedure [dbo].[P_GetICUVitualSign] Script Date: 05/21/2015 ...