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

时间：2023-12-14 21:19:30|栏目：HTML/Xhtml|点击：次

主要步骤:

主要代码：

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

HTML表格合并的具体实现方式(图1)

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

主要步骤:

一、先确认是要向右合并（列合并），还是向下合并（行合并）。

二、找出需要合并的单元格。

三、如果被合并的单元格有内容或者占用了位置，则可以将被合并的单元格在源代码中删掉。

特别注意：

我们在合并单元格的时候，如果被合并的单元格有内容，虽然不会影响到合并，但因为被合并的单元格内容没做任何处理，所以单元格会自动后移。

解决方案：直接删除多余的单元格即可。

主要代码：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

详解：

目标单元格：

1：跨行：最上侧单元格为目标单元格，写合并代码。

2：跨列：最左侧单元格为目标单元格，写合并代码。

HTML表格合并的具体实现方式(图2)

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

初始表格

<body>

<tr>

<th>全明星信息收集</th>

</tr>

<tr>

</tr>

<tr>

<td>唱跳rap打篮球</td>

</tr>

<tr>

<td>测码抽锐刻五</td>

</tr>

<tr>

<td>出名刀偷塔变终极猎手</td>

</tr>

</table>

</body>

HTML表格合并的具体实现方式(图3)

这显示出来就是上面的图片样子

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

HTML表格合并的具体实现方式(图4)

<body>

<tr>

<th rowspan="5">全明星信息收集</th>

</tr>

<tr>

</tr>

<tr>

<td>唱跳rap打篮球</td>

</tr>

<tr>

<td>测码抽锐刻五</td>

</tr>

<tr>

<td>出名刀偷塔变终极猎手</td>

</tr>

</table>

</body>

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

HTML表格合并的具体实现方式(图5)

<body>

<tr>

<th colspan="5">全明星信息收集</th>

<!-- <td></td>

</tr>

<tr>

</tr>

<tr>

<td>唱跳rap打篮球</td>

</tr>

<tr>

<td>测码抽锐刻五</td>

</tr>

<tr>

<td>出名刀偷塔变终极猎手</td>

</tr>

</table>

</body>

上一篇：超链接 a href 通过post方式提交表单的方法

栏目：HTML/Xhtml

下一篇：html网页引入svg图片的4种方式

本文标题：HTML表格合并的具体实现方式

本文地址：https://fushidao.cc/wangyezhizuo/199.html

更多HTML/Xhtml

HTML/Xhtml

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

主要步骤:

主要代码：

您可能感兴趣的文章

阅读排行

推荐教程