【HTML】table表格拆分合并（colspan、rowspan）
代码演示 横向合并：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>演示table标记2--单元格合并</title>
<style type="text/css">
td{
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" width="50%" height="150">
<caption>横向合并单元格</caption>
<!--colspan中必须指定要合并的列数目，是两列还是三列等等-->
<tr> <th colspan="2">姓名和年龄</th> <th>电话</th> </tr>
<tr> <td>Jack</td> <td>24</td> <td>1351234567</td> </tr>
<tr> <td>Tom</td> <td>22</td> <td>1351234567</td> </tr>
<tr> <td>Rose</td> <td>22</td> <td>1351234567</td> </tr>
<tr> <td>张三</td> <td>25</td> <td>1351234567</td> </tr>
</table>
<br/>
<table border="1" cellspacing="0" width="50%" height="150">
运行结果：
代码演示 纵向合并：
<table border="1" cellspacing="0" width="50%" height="150">
<caption>纵向合并单元格</caption>
<tr><th>班级</t> <th>姓名</th><th>年龄</th> <th>电话</th> </tr>
<tr><td rowspan="2">601班</td> <td>Jack</td> <td>24</td> <td>1351234567</td> </tr>
<tr> <td>Tom</td> <td>22</td> <td>1351234567</td> </tr>
<!--rowspan中必须指定要合并的列数目，是两行还是三行等等-->
<tr><td rowspan="3">602班</td> <td>Rose</td> <td>22</td> <td>1351234567</td> </tr>
<tr> <td>张三</td> <td>25</td> <td>1351234567</td> </tr>
<tr> <td>李四</td> <td>25</td> <td>1351234567</td> </tr>
</table>
</body>
</html>
原文：https://blog.csdn.net/qq_35415600/article/details/70237433
【HTML】table表格拆分合并（colspan、rowspan）的更多相关文章
- table表格中的 colspan rowspan cellpadding cellspacing
横跨两列的单元格: colspan 属性规定单元格可横跨的列数 colspan="2" <table border="1"> <tr> ...
- <table>标签总结（colspan跨列 ，rowspan跨行）
table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- js实现table表格相同内容按需合并
uniteTdCells(tableId) { var table = document.getElementById(tableId); for (let i = 0; i < table.r ...
- 普通table表格样式及代码大全(全)
普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...
- ASP.NET中重复表格列合并的实现方法(转自脚本之家)
这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...
- 自设table表格，获取内容，并经弹出框的url传参,获取结果显示在弹出框,并加载合计
table表格,选择框 form id="editForm1"> <table class="table_form"> <td > ...
- 关于 Table 表格那些三两事儿
引言 实现下列表格样式,嵌套与form表单中提交信息,为了让自己的表格可以“ 随心所欲 ” 变换自己的形式,需要两个重要的td 属性colspan 列合并 以及 rowspan 行合并 来实现,表格宽 ...
- html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用
<!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...
随机推荐
- A pure L1-norm principal component analysis
@ 目录 问题 细节 的损失函数 算法 投影 坐标系 载荷向量 A pure L1-norm principal component analysis 虽然没有完全弄清楚其中的数学内涵,但是觉得有趣, ...
- CLION 使用自己的makefile来运行
之前参考过这里和这里,都是说要使用add_custom_target,无奈看不懂 但是前一篇里说它参考的是stackoverflow上的回答,去原帖里发现后来更新的第二高票答案!!!非常好用!!! 在 ...
- C语言string操作
创建方式 字符数组:空间已定 字符指针:未分配空间 初始化 字符数组: 创建与赋值必须在同一行 指定大小:未填满部分用'\0'填充 用字符串初始化:末尾自动添加'\0' 不初始化赋值则乱值 字符指针: ...
- 关于 base64 编码
一.什么是Base64编码 Base64是一种用64个字符来表示任意二进制数据的方法.它是一种编码方式,而非加密方式.它通过将二进制数据转变为64个"可打印字符",完成了数据在HT ...
- MySQL数据操作与查询笔记 • 【第4章 SELECT 数据查询】
全部章节 >>>> 本章目录 4.1 select 选择列表 4.1.1 select 基本结构 4.1.2 选择列表 4.2 MySQL 运算符 4.2.1 MySQL ...
- 编写Java程序，在电脑硬盘里，查看 f:\text4\name 目录是否存在。
查看本章节 查看作业目录 需求说明: 在电脑硬盘里,查看 f:\text4\name 目录是否存在.如果不存在,则创建该目录:如果存在,则查找 readme.txt文件是否存在.如果 readme.t ...
- Ubuntu16.04下，rabbimq集群搭建
rabbitmq作为企业级的消息队列,功能很齐全,既可以作为单一的部署模式,又可以做集群的部署模式 单一部署就不说了,就是在一台服务器上部署rabbitmq消息队列,可以参考我的博客:Ubuntu16 ...
- CAS学习笔记三：SpringBoot自动配置与手动配置过滤器方式集成CAS客户端
本文目标 基于SpringBoot + Maven 分别使用自动配置与手动配置过滤器方式集成CAS客户端. 需要提前搭建 CAS 服务端,参考 https://www.cnblogs.com/hell ...
- 实践剖析.NET Core如何支持Cookie和JWT混合认证、授权
前言 为防止JWT Token被窃取,我们将Token置于Cookie中,但若与第三方对接,调用我方接口进行认证.授权此时仍需将Token置于请求头,通过实践并联系理论,我们继续开始整活!首先我们实现 ...
- CSS 基础 背景相关属性操作
1.background-color:red : //设置背景颜色为红色,rgb(0,0,0)和transparent 均为透明颜色 2.background-image(可缩bgi写用tab键) 语 ...