【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: ...
随机推荐
- Counterfactual VQA: A Cause-Effect Look at Language Bias
目录 概 主要内容 实现 代码 Niu Y., Tang K., Zhang H., Lu Z., Hua X. and Wen J. Counterfactual VQA: A Cause-Effe ...
- 由于ios由UIWebView换成了WKWebview内核后导致webview请求接口文件上传，后台接收不到文件
2020年4月起App Store将不再接受使用UIWebView的新App上架.2020年12月起将不再接受使用UIWebView的App更新. 解决后台文件接收不到的问题 function GLA ...
- vue 把字符串的所有=替换成&&&的方法
//把字符串中所有=换成&&& let reg=new RegExp('=','g')//g代表全部 let newMsg=JSON.stringify(msg).replac ...
- [opencv]调用鼠标事件执行grabcut算法实现阈值分割
#include<iostream> #include <opencv2/opencv.hpp> #include <math.h> using namespace ...
- JavaScript交互式网页设计 • 【第6章 初识jQuery】
全部章节 >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...
- 编写Java程序，方法练习题__构建英雄类，定义一个int类型的变量output，表示英雄的血量
返回本章节 返回作业目录 需求说明: 定义一个int类型的变量output,表示英雄的血量,当battle()方法执行一次,output变量值减少10.在控制台随机输入一个小于100的整数,将该整数值 ...
- Linux下设置普通用户使用sudo命令
1.登录root用户 2.增加root用户对文件sudoers的写权限 chmod u+w /etc/sudoers 3.编辑sudoers,把用户mysql添加进去 vi /etc/sudoers ...
- mysql 连接表 内连接 inner
字段去重 关键字distinct 去除重复记录 可配合分组函数使用 select distinct job,deptno from emp; 未使用 distinct之前 使用后: 笛卡尔积现象:当 ...
- 【从小白到专家】 Istio专题之七：30分钟讲透Istio访问与控制
本文为Istio系列专题之七--Istio访问与控制.Istio通过身份认证.授权.多重安全策略,来保证微服务的安全,实现代码无侵入性.有时我们需要对微服务间的相互访问进行控制,比如满足某些条件的微服 ...
- Vulnhub系列：chili
0x01 靶机信息 靶机:chili难度:简单下载:https://www.vulnhub.com/entry/chili-1,558/ 靶机描述: 0x02 信息收集 nmap扫描存活主机确定靶场i ...