【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: ...
随机推荐
- 一个不常遇到的HbuilderX自动化测试运行问题
晚上10点左右,刚好说想研究一下uniapp项目中怎么进行自动测试,于是跟着插件的官方教程开始配置测试环境,写好了一个简单的测试脚本,然后图形化操作IDE运行测试,却报错了一大片错误信息,如下所示: ...
- 排列组合 "n个球放入m个盒子m"问题 总结
求,盒子都可以分成是否不能区分,和能区分,还能分成是否能有空箱子,所以一共是8种情况,我们现在来一一讨论. 1.球同,盒不同,无空箱 C(n-1,m-1), n>=m0, n<m 使用插板 ...
- css中cursor(光标类型)
值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器 ...
- SpringCloud创建项目父工程
1.说明 本文详解介绍Spring Cloud项目的父工程创建, 由于Spring Cloud项目下有很多模块组件, 需要先创建一个大的父工程项目, 然后在下面创建各个子工程模块. 2.创建父工程 这 ...
- SpringBoot集成Log4j2框架
1.说明 本文详细介绍Spring Boot集成Log4j2框架的方法, 基于已经创建好的Spring Boot工程, 由于Spring Boot默认使用的是Logback框架, 需要先排除掉Logb ...
- Android8 以上使用 UIautomator Viewer提示Unexpected error while obtaining UI hierarchy报错（方法二）
一:最常见的一个问题就是:Android8及以上的系统无法获取到页面,提示报下面的错误 二:解决办法 1.下载新的tools,在下面链接里找到SDK tools下载 http://www.androi ...
- 初识python： 属性方法 @property
属性方法:通过@property把一个方法变成一个静态属性 实例: 调用航班的状态 # 查看航班状态 import random class CheckState(object): def __ini ...
- 关闭SpringBoot logo图标
public static void main(String[] args) {// SpringApplication.run(LicenseApp.class, args); //关闭Spring ...
- 细谈 Java 匿名内部类 【分别 使用 接口 和 抽象类实现】
1.前言 匿名内部类是什么东西? 没有名字的内部类就是匿名内部类. 什么场景使用? 匿名内部类适合创建那种只需要一次使用的类. 这是个很有用的东西,可想而知,如果不使用匿名内部类,哪些只需要使用一次的 ...
- nvm安装vue-cli
使用nvm可以更换nodejs版本.方便不同项目的切换 1.安装nvm(本人提供版本为1.1.9,当前最新) ① 到官网自行下载 https://github.com/coreybutler/nvm- ...