资料分享

资料分享平时使用

当前位置:首页>考试资讯>资料分享
全部 132 资料分享 7 考试动态 113 学校动态 5 报考问答 7

HTML 中table表格中的行合并与列合并 教程

时间:2024-07-28   访问量:1009

在使用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>

浏览器运行效果如下所示

53daae9cddb8818950055ee4e1762478.jpg
大多数软件中,行指的都是横向的,列指的都是纵向的。

需求:合并第二行第一列的 “abc” 和第三行第一列的 “一二三”

2.jpg

我们按照合并单元格的步骤一步一步来。

第一步:首先确定该需求属于跨行合并单元格,应该用rowspan

第二步:跨行合并单元格按照先上后下的规则,什么是先上后下的规则呢?**来说,就是哪个单元格在上面,就把属性 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 的属性值填写的是数字,你要合并的单元格有几个,就写几

到这里如果我们直接运行代码,会出现什么情况呢 ?浏览器运行效果如下所示

3.jpg

你会发现整个表格全乱了。

为什么会出现这种情况呢 ?
答:我们在合并单元格的时候,如果被合并的单元格有内容,虽然不会影响到合并,但因为被合并的单元格内容没做任何处理,所以单元格会自动后移。

如何解决这种情况呢?
很**,直接删除多余的单元格即可。
这里有个小公式: 删除的个数 = 合并的个数 - 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>

浏览器运行效果如下所示

4.jpg
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”

5.jpg
第一步:首先确定该需求属于跨列合并单元格,用colspan

第二步:跨列合并单元格按照先左后右的规则,什么是先左后右的规则呢?**来说,就是哪个单元格在左边,就把属性 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>

浏览器运行效果如下所示

6.jpg
到这里我们已经实现了跨列合并。

结束语

技术是一点一点积累的,大神也不是一天就可以达到的。原地不动就是退步,所以每天进步一点点。

*后,附上一句格言:"好学若饥,谦卑若愚",望共勉。

在线报名

上一篇:发布教育培训广告要注意

下一篇:colspan和rowspan的意思详解

评论记录:

未查询到任何数据!

发表评论:

微信咨询
咨询学费
了解更多
请添加微信:
15380393582

复制并跳转微信

x

课程咨询

点击这里给我发消息 方通-郭老师

点击这里给我发消息 方通-马老师

点击这里给我发消息 方通-杨老师

点击这里给我发消息 方通-张老师

在线咨询

免费通话

24小时免费咨询

请输入您的联系电话,座机请加区号

免费通话

微信扫一扫

微信联系
返回顶部