HTML表格合并的具体实现方式

时时网络工作室 · 发表于 2024-4-20 08:08:33

当我们在做出一份HTML表格的时候

可以看到这样是非常不河狸的。这就需要合并单元格了

主要步骤:

一、先确认是要向右合并（列合并），还是向下合并（行合并）。
二、找出需要合并的单元格。
三、如果被合并的单元格有内容或者占用了位置，则可以将被合并的单元格在源代码中删掉。
特别注意：
我们在合并单元格的时候，如果被合并的单元格有内容，虽然不会影响到合并，但因为被合并的单元格内容没做任何处理，所以单元格会自动后移。
解决方案：直接删除多余的单元格即可。
主要代码：

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
详解：
目标单元格：
1：跨行：最上侧单元格为目标单元格，写合并代码。
2：跨列：最左侧单元格为目标单元格，写合并代码。

然后我们跟着主要步骤来一遍：

初始表格
<body>
<table border="1" align="center" width="100%" cellpadding="20" cellspacing="0">
<tr>
<th>全明星信息收集</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td></td>
<td>哥哥</td>
<td>男</td>
<td>24</td>
<td>唱跳rap打篮球</td>
</tr>
<tr>
<td></td>
<td>理塘</td>
<td>男</td>
<td>20</td>
<td>测码抽锐刻五</td>
</tr>
<tr>
<td></td>
<td>梦泪</td>
<td>男</td>
<td>27</td>
<td>出名刀偷塔变终极猎手</td>
</tr>
</table>
</body>

复制代码

这显示出来就是上面的图片样子
跨行合并（rowspan）：如果我们想要下面的效果就需要使用到rowspan属性

<body>
<table border="1" align="center" width="100%" cellpadding="20" cellspacing="0">
<tr>
<th rowspan="5">全明星信息收集</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td>哥哥</td>
<td>男</td>
<td>24</td>
<td>唱跳rap打篮球</td>
</tr>
<tr>
<td>理塘</td>
<td>男</td>
<td>20</td>
<td>测码抽锐刻五</td>
</tr>
<tr>
<td>梦泪</td>
<td>男</td>
<td>27</td>
<td>出名刀偷塔变终极猎手</td>
</tr>
</table>
</body>

复制代码

跨列合并（colspan）：如果我们想要下面的效果就需要使用到colspan属性

<body>
<table border="1" align="center" width="100%" cellpadding="20" cellspacing="0">
<tr>
<th colspan="5">全明星信息收集</th>
<!-- <td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td>哥哥</td>
<td>男</td>
<td>24</td>
<td>唱跳rap打篮球</td>
</tr>
<tr>
<td>理塘</td>
<td>男</td>
<td>20</td>
<td>测码抽锐刻五</td>
</tr>
<tr>
<td>梦泪</td>
<td>男</td>
<td>27</td>
<td>出名刀偷塔变终极猎手</td>
</tr>
</table>
</body>

复制代码

到此这篇关于HTML表格合并的具体实现方式的文章就介绍到这了,更多相关HTML表格合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

少数派 · 发表于 2024-4-24 17:48:30

看了LZ的帖子，我只想说一句很好很强大！

aa226521 · 发表于 2024-4-29 07:56:48

让我们一起努力

深情铁蛋 · 发表于 2024-5-29 23:06:55

说得太好了，完全同意！

1060000306 · 发表于 2024-6-22 01:21:42

嘎嘎嘎嘎嘎嘎嘎

KOBE · 发表于 2024-7-2 12:44:15

你的信息来源是？我想了解更多。

电竞摇啊摇 · 发表于 2024-8-11 16:26:21

你的信息来源是？我想了解更多。

发生什么事了冫 · 发表于 2024-8-14 20:16:23

我不确定这个信息的准确性，请再确认一下

努力坚持到底 · 发表于 2024-8-17 14:41:20

能给个链接吗？我想深入了解一下。

上市基金1 · 发表于 2024-8-24 22:54:51

能给个链接吗？我想深入了解一下。

		自动登录	找回密码
密码			立即注册

HTML表格合并的具体实现方式

本帖子中包含更多资源

热心会员

付费会员