【干货】html表格的跨行合并与跨列合并

最新推荐文章于 2023-09-30 12:56:58 发布
最新推荐文章于 2023-09-30 12:56:58 发布
阅读量1.4w 收藏 25
点赞数 9
分类专栏： 前端网页 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feixs1/article/details/108370402
版权

在HTML中经常会用到表格，但由于我们想要的表格总是需要不规则的。而表格的合并常常会经常用到，今天我们来看一下表格的合并。

首先我们要了解一下合并的步骤

  1. 先确认是跨行合并还是跨列合并
  2. 根据单元格先上后下，先左后右来进行合并
  3. 如果要合并的单元格有内容则需要先将内容消除

在表格合并前需要明确我们的合并是跨行合并还是跨列合并
在这里插入图片描述

一、跨行合并rowspan

在 HTML 中，可以使用属性 rowspan 来合并行，即合并纵向的多个相邻单元格

首先我做了一个HTML表格
在这里插入图片描述

现在我想将5、10、15合并，接下来按照跨行的步骤进行

步骤：

  1. 确定为跨行合并
  2. 跨行合并按照先上后下的原则进行合并，即把属性rowspan放到需要合并的最上面单元格的td标签中。
  3. rowspan的参数数字是你要合并几个表格就是多少
  4. 将被合并的td标签和其内容全部删除

所以我们将属性rowspan放到5的td标签中

在这里插入图片描述
发生了错误，那这个为什么呢？

原因是我忘记将10，15的td标签删除，所以出现了错误

注意：当我们弄完rowspan属性后一定要将剩下被合并的td标签删除
具体代码如下：

注意：10，15的td标签被删除了
		<tr>
			<td class="b1">
				<p>1</p>
			</td>
			<td class="b1">
				<p>2</p>
			</td>
			<td class="b1">
				<p>3</p>
			</td>
			<td class="b1">
				<p>4</p>
			</td>
			<td class="b1" rowspan="3">
				<p>5</p>
			</td>
		</tr>
		<tr>
			<td class="b1">
				<p>6</p>
			</td>
			<td class="b1">
				<p>7</p>
			</td>
			<td class="b1">
				<p>8</p>
			</td>
			<td class="b1">
				<p>9</p>
			</td>
		</tr>
		<tr>
			<td class="b1">
				<p>11</p>
			</td>
			<td class="b1">
				<p>12</p>
			</td>
			<td class="b1">
				<p>13</p>
			</td>
			<td class="b1">
				<p>14</p>
			</td>
		</tr>

当我们删除后：
在这里插入图片描述

叮咚，我们成功了！

二、跨列合并colspan

在 HTML 中，可以使用属性 colspan 来合并列，即合并横向的多个相邻单元格。

还是我们原来的表格：

在这里插入图片描述
当我们想要将11，12，13进行合并，具体的步骤如下：

步骤：

  1. 确定为跨列合并
  2. 跨行合并按照先左后右的原则进行合并，即把属性colspan放到需要合并的最左边单元格的td标签中。
  3. colspan的参数数字是你要合并几个表格就是多少
  4. 将被合并的td标签和其内容全部删除

代码如下：

注意：12，13的td标签被删除了
		<tr>
			<td class="b1" colspan="3">
				<p>11</p>
			</td>
			<td class="b1">
				<p>14</p>
			</td>
			<td class="b1">
				<p>15</p>
			</td>
		</tr>

运行之后：

在这里插入图片描述

大体的步骤与问题和跨行合并类似。
好啦，到这里我们的跨列合并也完毕了！
如果大家有什么疑问可以在评论区留言或者私信我哈！
附上跨行合并和跨列合并的全部代码，大家可以参考一下！

跨行合并的全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格合并</title>
</head>
<style type="text/css">
	body{
		position: relative;
		margin:60px;
	}
	.b1{
		width:60px;
		text-align: center;
	}
</style>
<body>
	<table border="1">
		<tr>
			<td class="b1">
				<p>1</p>
			</td>
			<td class="b1">
				<p>2</p>
			</td>
			<td class="b1">
				<p>3</p>
			</td>
			<td class="b1">
				<p>4</p>
			</td>
			<td class="b1" rowspan="3">
				<p>5</p>
			</td>
		</tr>
		<tr>
			<td class="b1">
				<p>6</p>
			</td>
			<td class="b1">
				<p>7</p>
			</td>
			<td class="b1">
				<p>8</p>
			</td>
			<td class="b1">
				<p>9</p>
			</td>
		</tr>
		<tr>
			<td class="b1">
				<p>11</p>
			</td>
			<td class="b1">
				<p>12</p>
			</td>
			<td class="b1">
				<p>13</p>
			</td>
			<td class="b1">
				<p>14</p>
			</td>
		</tr>
		<tr>
			<td class="b1">
				<p>16</p>
			</td>
			<td class="b1">
				<p>17</p>
			</td>
			<td class="b1">
				<p>18</p>
			</td>
			<td class="b1">
				<p>19</p>
			</td>
			<td class="b1">
				<p>20</p>
			</td>
		</tr>
	</table>
</body>
</html>

跨列合并的全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格合并</title>
</head>
<style type="text/css">
	body{
		position: relative;
		margin:60px;
	}
	.b1{
		width:60px;
		text-align: center;
	}
</style>
<body>
	<table border="1">
		<tr>
			<td class="b1">
				<p>1</p>
			</td>
			<td class="b1">
				<p>2</p>
			</td>
			<td class="b1">
				<p>3</p>
			</td>
			<td class="b1">
				<p>4</p>
			</td>
			<td class="b1">
				<p>5</p>
			</td>
		</tr>
		<tr>
			<td class="b1">
				<p>6</p>
			</td>
			<td class="b1">
				<p>7</p>
			</td>
			<td class="b1">
				<p>8</p>
			</td>
			<td class="b1">
				<p>9</p>
			</td>
			<td class="b1">
				<p>10</p>
			</td>
		</tr>
		<tr>
			<td class="b1" colspan="3">
				<p>11</p>
			</td>
			<td class="b1">
				<p>14</p>
			</td>
			<td class="b1">
				<p>15</p>
			</td>
		</tr>
		<tr>
			<td class="b1">
				<p>16</p>
			</td>
			<td class="b1">
				<p>17</p>
			</td>
			<td class="b1">
				<p>18</p>
			</td>
			<td class="b1">
				<p>19</p>
			</td>
			<td class="b1">
				<p>20</p>
			</td>
		</tr>
	</table>
</body>
</html>
feixs1
关注
  • 9
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
干货|数据分析之用户画像方法与实践
03-03
本文来自作者罗志恒,文章重点讲解了用户画像在数据分析中的应用；如何构建用户画像。在日常商业活动中，有各种各样的职能划分：增长、内容、活动、产品，虽然具体工作和最终目标不一样，但其实都是围绕着“用户”去做，可以说都是在做“用户运营”。如今伴随着流量红利的结束、获客成本的不断提高，我们进入了一个用户精细化运营阶段。在这个阶段中，我们不得不使用一个工具——用户“画像”标签体系。今天我们就来说说用户画像。本文重点：1.用户画像在数据分析中的应用；2.如何构建用户画像。用户画像（UserPersona）的概念最早由交互设计之父AlanCooper提出，是建立在一系列属性数据之上的目标用户模型。一般是产品
03_HTML表格的跨列跨行（colspan属性设置跨列、rowspan属性设置换行）
qq_45657848的博客
01-11 4176
HTML表格的跨列跨行（colspan属性设置跨列、rowspan属性设置换行）
【HTML】HTML 表格 ③ ( 合并单元格 | 跨行合并 | 跨列合并 | 单元格合并顺序 | 跨行设置 rowspan 属性 | 跨列设置 colspan 属性 )
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-10 3万+
一、合并单元格、 1、合并单元格方式、 2、合并单元格顺序、 3、合并单元格流程、 二、合并单元格示例、 1、原始表格、 2、跨行合并单元格、 3、跨列合并单元格、
12款实用的HTML5干货分享.zip
03-03
CSS3可视化网页编辑器 基于tinymce编辑器.rar CSS3垂直图标菜单 带Tooltip提示框.rar CSS3多样式小图标按钮 带分享按钮.rar CSS3实现一款联系表单 输入框带小图标.rar HTML5 3D立方体旋转动画.rar HTML5_CSS3图片描述效果 文字描述浮动在图片上.rar HTML5_CSS3多颜色柱状图表 带基准数据线.rar HTML5_CSS3牙刷动画 模拟真实刷牙效果.rar 动感的CSS3 Loading文字特效.rar 漂亮的CSS3动画进度条 可自定义进度条颜色.rar 纯CSS3实现滑杆开关切换按钮动画.rar 纯CSS3背景渐变按钮 按钮图标淡入淡出动画.rar
干货分享|详解特征工程与推荐系统及其实践
02-24
本文来自于网络，本文主要介绍了特征工程，以及一些常见的特征工程的方法，以及自然语言处理的特征工程，希望对您的学习有所帮助。协同过滤CollaborativeFiltering特征工程FeatureEngineering推荐系统实战注意点首先我们看一下机器学习的五大环节。一是特征工程。第二是算法定义和调参，就是你该选择什么样的算法，用什么样的参数进行调节。第三是数据采集和清洗，接下来是实现这个算法并进行优化。‘I’代表和业务生产系统集成，所以我们就会简称为FaDAI这五大步骤。特征工程是这五大环节最重要的一部分。我们会简单介绍一下特征工程，以及一些常见的特征工程的方法。引用一下吴恩达的话：“应用
关于HTML中表格单元格的合并
Mark_ling的博客
10-24 1万+
当我们在做出一份HTML表格的时候可以看到这样是非常不河狸的。这就需要合并单元格了。
HTML表格合并行和列
大河之犬的博客
09-29 2万+
在设计表格时，有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格（类似Word的表格合并），这个时候就需要用到“合并行”或“合并列”
【HTML】表格行和列的合并
sunriver2000的专栏
09-30 2126
当我们需要在 HTML 表格中展示复杂的数据时，行和列的合并可以帮助我们实现更灵活的布局和结构。通过合并行和列，我们可以创建具有更多层次和结构的表格，使数据更易于理解和分析。在 HTML 表格中，我们可以使用 rowspan 和 colspan 属性来实现行和列的合并。rowspan 属性用于指定一个单元格跨越的行数，而 colspan 属性用于指定一个单元格跨越的列数。例如，当我们有一个具有多级标题的表格时，可以使用 rowspan 和 colspan 来合并单元格，以创建层次结构。
HTML表格合并的实现方法
xiaoweids的博客
05-15 1656
表格是日常常用的工具，很多时候需要用到单元合并，本文主要介绍了HTML表格合并的具体实现方式， 具有一定的参考价值，感兴趣的可以了解一下当我们在做出一份HTML表格的时候可以看到这样是非常不河狸的。这就需要合并单元格了。
html表格table的单元格合并，即跨行跨列属性colspan rowspan
kikiwhq的专栏
03-29 1822
html表格table的单元格合并，即跨行跨列属性colspan rowspan
会计干货之金蝶财务软件与会计规定相悖的探析.doc
11-30
会计干货之金蝶财务软件与会计规定相悖的探析.doc
干货分享-数字孪生应用与现实世界的虚实交互共6页.pdf
11-20
干货分享——数字孪生应用与现实世界的虚实交互共6页.pdf.zip
电脑行业跨境电商干货电脑行业外贸电商培训
06-30
电脑行业跨境电商干货电脑行业外贸电商培训
跨境电商干货外贸3c行业新品开发与选品技巧.docx
02-24
跨境电商干货外贸3c行业新品开发与选品技巧.docx
大数据干货|Hbase设计与开发实战
02-23
传统的关系型数据库处理方式是基于全面的ACID保证，遵循SQL92的标准表设计模式（范式）和数据类型，基于SQL语言的DML数据交互方式。长期以来这种基于关系型数据库的IT信息化建设中发展良好，但受制于关系型数据库提供的数据模型，对于逐渐出现的，为预先定义模型的数据集，关系型数据库不能很好的工作。越来越多的业务系统需要能够适应不同种类的数据格式和数据源，不需要预先范式定义，经常是非结构化的或者半结构化的（如用户访问网站的日志)，这需要系统处理比传统关系型数据库高几个数量级的数据（通常是TB及PB规模级别）。传统关系型数据库能够纵向扩展到一定程度（如Oracle的RAC，IBM的pureScal
会计干货之跨境电子商务出口退(免)税问题研析.doc
11-28
会计干货之跨境电子商务出口退(免)税问题研析.doc
揭秘跨境电商
04-17
第二篇从物流、支付、营销和政策四个方面阐述跨境电商的外围生态圈，专业度高，读者可得到不少“干货”；第三篇谈跨境电商的出路，以作者的个人观点为主；第四篇专注于进口跨境电商，全面描述了这个行业的基本情况。
【期末大作业】公益网站ps平面设计
feixs1的博客
06-28 2456
最近《平面设计》课程考试是以一个网页设计大作业来代替。 至于主题并没有限制，我放一张要求图 当时一个小组是三个人，我们在最后几天才开始做（考试，课程论文压倒了我们） 我和小组成员初期商量要做一个什么网站， 想法： 是大家可以直接浏览网站而不必在app或小程序浏览的，所以这个要求就pass很多主题。 有自己的特色 最终我提出公益网站的想法时，正好满足我们的要求，于是确定主题做一个公益网站并且随着深入就将主题趋近于儿童的公益网站。 小组成员工作： 收集相关素材（儿童图片） 收集相关网页（不一定是公益，只
html表格td合并
最新发布
10-19
在HTML表格中，可以使用rowspan和colspan属性来合并单元格。其中，rowspan属性用于跨行合并单元格，而colspan属性用于跨列合并单元格。具体操作方法如下： 1. 跨行合并单元格：在需要合并的单元格中添加rowspan属性，并设置其值为需要合并的行数减1。例如，如果需要将第一列的前两行单元格合并为一个单元格，则可以在第一行单元格中添加rowspan="2"属性。 2. 跨列合并单元格：在需要合并的单元格中添加colspan属性，并设置其值为需要合并的列数减1。例如，如果需要将第一行的前两列单元格合并为一个单元格，则可以在第一列单元格中添加colspan="2"属性。 下面是一个示例代码，演示了如何使用rowspan和colspan属性合并单元格： ``` <table border="1"> <tr> <th rowspan="2">姓名</th> <th colspan="2">成绩</th> </tr> <tr> <th>语文</th> <th>数学</th> </tr> <tr> <td>张三</td> <td>80</td> <td>90</td> </tr> <tr> <td>李四</td> <td colspan="2">85</td> </tr> </table> ``` 在上面的代码中，第一行单元格使用了rowspan="2"属性，将其合并为一个单元格；第二行单元格使用了colspan="2"属性，将其合并为一个单元格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值