【HTML 教程系列第 19 篇】HTML 表格中的行合并与列合并
这是【HTML 教程系列第 19 篇】,如果觉得有用的话,欢迎关注专栏。
在使用 Excel 的时候,会经常的用到合并单元格,而在 HTML 的表格中,有时我们也需要将横向的多个单元格或者纵向的多个单元格合并成一个单元格,如何实现呢?
文章目录
- 一:合并单元格步骤
- 二:行合并 rowspan
- 三:列合并 colspan
一:合并单元格步骤
- 第一步:先确认是跨行合并(rowspan)还是跨列合并(colspan)。
- 第二步:根据先上后下,先左后右规则,找出需要合并的单元格。
- 第三步:如果被合并的单元格内有内容,则把被合并的单元格删除掉。
二:行合并 rowspan
作用
在 HTML 中,可以使用属性 rowspan 来合并行,即合并纵向的多个相邻单元格。
举例说明
代码如下所示
<table align="center" cellspacing="15" cellpadding="15"><caption>统计表</caption><tr><td>123</td><td>123</td><td>123</td></tr><tr><td>abc</td><td>abc</td><td>abc</td></tr><tr><td>一二三</td><td>一二三</td><td>一二三</td></tr>
</table>
浏览器运行效果如下所示
大多数软件中,行指的都是横向的,列指的都是纵向的。
需求:合并第二行第一列的 “abc” 和第三行第一列的 “一二三”
我们按照合并单元格的步骤一步一步来。
第一步:首先确定该需求属于跨行合并单元格,
第二步:跨行合并单元格按照先上后下的规则,什么是先上后下的规则呢?简单来说,就是哪个单元格在上面,就把属性 rowspan 写到对应的单元格标签 td 中。所以我们需要先找到第二行第一列的单元格 td,局部代码如下所示
<tr><td>123</td><td>123</td><td>123</td></tr><tr><td rowspan="2">abc</td><td>abc</td><td>abc</td></tr><tr><td>一二三</td><td>一二三</td><td>一二三</td></tr>
rowspan 的属性值填写的是数字,你要合并的单元格有几个,就写几。
到这里如果我们直接运行代码,会出现什么情况呢 ?浏览器运行效果如下所示
你会发现整个表格全乱了。
为什么会出现这种情况呢 ?
答:我们在合并单元格的时候,如果被合并的单元格有内容,虽然不会影响到合并,但因为被合并的单元格内容没做任何处理,所以单元格会自动后移。
如何解决这种情况呢?
很简单,直接删除多余的单元格即可。
这里有个小公式: 删除的个数 = 合并的个数 - 1,这也是我们的第三步。
因为第三行第一列的单元格已经被合并了,所以我们需要将它删除,更改后的代码如下所示
<tr><td>123</td><td>123</td><td>123</td></tr><tr><td rowspan="2">abc</td><td>abc</td><td>abc</td></tr><tr><td>一二三</td><td>一二三</td></tr>
浏览器运行效果如下所示
ok,到这里我们已经实现了跨行合并。
三:列合并 colspan
作用
在 HTML 中,可以使用属性 colspan 来合并列,即合并横向的多个相邻单元格。
其中 colspan 是 column span(跨列)的英文缩写。
举例说明
代码如下所示
<table align="center" cellspacing="15" cellpadding="15"><caption>统计表</caption><tr><td>123</td><td>123</td><td>123</td></tr><tr><td>abc</td><td>abc</td><td>abc</td></tr><tr><td>一二三</td><td>一二三</td><td>一二三</td></tr>
</table>
需求:合并第二行第二列的 “abc” 和同行第三列的 “abc”
第一步:首先确定该需求属于跨列合并单元格,
第二步:跨列合并单元格按照先左后右的规则,什么是先左后右的规则呢?简单来说,就是哪个单元格在左边,就把属性 colspan 写到对应的单元格标签 td 中。所以我们需要先找到第二行第二列的单元格 td。
第三步:删除第二行第三列的单元格,局部代码如下所示
<tr><td>123</td><td>123</td><td>123</td></tr><tr><td>abc</td><td colspan="2">abc</td></tr><tr><td>一二三</td><td>一二三</td><td>一二三</td></tr>
浏览器运行效果如下所示
到这里我们已经实现了跨列合并。
你的问题得到解决了吗?欢迎在评论区留言。
赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。
结束语
技术是一点一点积累的,大神也不是一天就可以达到的。原地不动就是退步,所以每天进步一点点。
最后,附上一句格言:"好学若饥,谦卑若愚",望共勉。
【HTML 教程系列第 19 篇】HTML 表格中的行合并与列合并相关推荐
- 【Unity3D 教程系列第 19 篇】Unity 中根据长方体模型的尺寸添加碰撞盒 BoxCollider
这是[Unity3D 教程系列第 19 篇],如果觉得有用的话,欢迎关注专栏. 前言: 给一个长方体模型添加碰撞盒 BoxCollider,即使手动拖拽也费不了多长时间,但手动拖动不仅显得 Low , ...
- 【Dart 教程系列第 19 篇】Dart 之 indexWhere、lastIndexWhere 返回数组中第一个满足条件的元素的索引
这是[Dart 教程系列第 19 篇],如果觉得有用的话,欢迎关注专栏. Dart 返回数组中第一个满足条件的元素的索引,用 indexWhere() 方法或者 lastIndexWhere() 方法 ...
- 用VBA得到EXCEL表格中的行数和列数
用VBA得到EXCEL表格中的行数和列数 每种方法中上面的是Excel的行数,下面的是Excel的列数. 方法1: ActiveSheet.UsedRange.Rows.Count ActiveShe ...
- (转贴)用VBA得到EXCEL表格中的行数和列数
<script type="text/javascript"></script> <script src="http://pagead2.g ...
- 【HTML 教程系列第 22 篇】 HTML 中的 input 标签,看这一篇就够了
这是[HTML 教程系列第 22 篇],如果觉得有用的话,欢迎关注专栏. 文章目录 一:什么是 input 标签 ? 二:input 标签中 type 属性取值有哪些 ? 1:text 单行文本框 2 ...
- 【HTML 教程系列第 11 篇】HTML 中常用的文本格式化标签
这是[HTML 教程系列第 11 篇],如果觉得有用的话,欢迎关注专栏. 在网页中,有时需要为文字设置粗体.斜体.下划线或上下标等效果,这时就需要用到 HTML 中的文本格式化标签(也叫文本标签),常 ...
- 【Lua 教程系列第 4 篇】Lua 中的第一行代码 hello world
这是[Lua 教程系列第 4 篇],如果觉得有用的话,欢迎关注专栏. 接着上一篇博客继续写. 这里我的 lua 文件名起名为"LuaTest",接着输入 print("h ...
- 【Dart 教程系列第 28 篇】Dart中的 Map 和实体类的相互转换
这是[Dart 教程系列第 28 篇],如果觉得有用的话,欢迎关注专栏. 首先声明一个实体类 class People {String name; // 姓名String area; // 地区Str ...
- 【C# 教程系列第 10 篇】c# 中如何让指定类不能被继承?
这是[C# 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. 有时候我们并不希望自己写的类被继承,怎么做呢? 方法很简单,只需要在定义类时加上 sealed 关键字,用 sealed 关键字声 ...
最新文章
- OpenGL函数库详解
- python编写的软件界面-用Python写一个带图形界面的文件压缩软件
- 解决在thinkphp5.0中用ajax访问后台控制器方法时,返回的数据显示不出来
- 2.2.4 操作系统之作业/进程调度算法(FCFS先来先服务、SJF短作业优先、HRRN高响应比优先)
- [Swagger2]分组和接口注释及小结
- Apple Pay 支付集成
- maven引入hadoop_如何在maven中引用hadoop v2.3.0 jar?
- 如何在JavaScript中声明名称空间?
- android wakelock权限,android - 当我使用PowerManager.WakeLock与AlaramManager android时的权限异常 - 堆栈内存溢出...
- 18项医疗质量安全核心制度
- 中通2008通信概预算编制系统简介
- 全面剖析雅虎助手以及网络实名的流氓行径(4)
- xzp android webview,加载gif动态图的三种方式
- linux系统下多终端管理工具,terminator
- Android APP memory用量如何回收
- “黎明号”(Dawn)深空航天器与高效离子引擎
- File文件的属性设置
- springboot/vue前后端分离后台管理系统增删改查
- SpringGateway网关
- 好马遇到“回头草” 面子与饭碗哪个更重要?