【HTML】HTML基础6.2(表格之合并单元格)

目录

合并单元格效果

与<>

[​编辑 合并属性](#编辑 合并属性)

使用方法

步骤总结


合并单元格效果

代码

html 复制代码
<table align="center" border="2">
			<thead>
				<tr><th>演员</th><th>成就</th><th>剧照</th></tr>
			</thead>
			<tbody>
				<tr><td rowspan="2"><a href="https://baike.baidu.com/item/%E5%85%8B%E9%87%8C%E6%96%AF%C2%B7%E5%B8%95%E6%8B%89%E7%89%B9/891886?fromModule=lemma_inlink" target="_blank">克里斯·帕拉特</a></td> <td>美国MTV电影奖最佳男演员</td> <td rowspan="2"><img src="img/写真.webp" width="100"></td></tr>
				<tr><td>第41届土星奖最佳男主角</td></tr>	 
				<tr><td rowspan="2"><a href="https://baike.baidu.com/item/%E6%88%B4%E5%A4%AB%C2%B7%E5%B7%B4%E8%92%82%E6%96%AF%E5%A1%94/14493953?fromModule=lemma_inlink#3" target="_blank">戴夫·巴蒂斯塔</a></td> <td>世界重量级冠军</td> <td rowspan="2"><img src="img/大块头.webp" width="100"></td></tr>
				<tr><td>OVW重量级冠军</td></tr>
				<tr><td rowspan="2"><a href="https://baike.baidu.com/item/%E4%BD%90%E4%BC%8A%C2%B7%E7%B4%A2%E5%B0%94%E8%BE%BE%E5%A8%9C/6131187" target="_blank">佐伊·索尔达娜</a></td>  <td>第36届土星奖最佳女主角奖</td> <td rowspan="2"><img src="img/女主.webp" width="100"></td></tr>
				<tr><td>第19届MTV电影奖最佳女演员奖(提名)</td></tr>
				</tbody>
		</table>

接下来是效果实现解析

<thead></thead>与<><tbody></tbody>

这两种标签没有实际意义,只是能够增加可读性,并且可以收缩,很常用

如:收缩状态

打开之后

合并属性

|------------------------|--------|
| rowspan="合并单元格的个数" | 跨行 |
| colspan="合并单元格的个数" | 跨列 |
| | |

使用方法

如果要实现跨行操作,这时候可以,找到最上面的一个单元格为目标,插入属性,如

html 复制代码
	<tr><td rowspan="2"><a href="某个链接">克里斯·帕拉特</a></td> <td>美国MTV电影奖最佳男演员</td> <td rowspan="2"><img src="img/写真.webp" width="100"></td></tr>

这个时候的表格就是合并了的

这个时候还要特别注意,合并过后的表格一定要删掉他已经合并了的表格的内容

这个实际上是两行,但是第一列和第三列都已经被合并了

所以代码的下一行只需要写上你还要的就可以了

html 复制代码
<tr><td rowspan="2"><a href="https://baike.baidu.com/item/%E5%85%8B%E9%87%8C%E6%96%AF%C2%B7%E5%B8%95%E6%8B%89%E7%89%B9/891886?fromModule=lemma_inlink" target="_blank">克里斯·帕拉特</a></td> <td>美国MTV电影奖最佳男演员</td> <td rowspan="2"><img src="img/写真.webp" width="100"></td></tr>
				<tr><td>第41届土星奖最佳男主角</td></tr>	 

步骤总结

①确认您想要合并的是行还是列

②找到最上边或者最左边的单元格

③删除已经合并的单元格的多余内容

今天的分享就到这里啦~希望能帮到您!

相关推荐
天天向上10246 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y22 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁28 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry29 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录30 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟31 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan35 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson39 分钟前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区1 小时前
盘点字体性能优化方案
前端·javascript