0


WEB-前端 表格标签-合并单元格

目录

特殊情况下,可以把多个单元格合并为一个单元格,我们呢先以学会最简单的合并单元格即可~!

                   ![](https://img-blog.csdnimg.cn/direct/28aa6028e20f4750b6cc7f4da533579c.jpeg)

                        如上示的   照片 和 个人简历 就是合并多个单元格 ~! 

合并单元方式 :

跨行合并 :

       ** # **   rowspan= " 合并单元格的个数 " 

           ![](https://img-blog.csdnimg.cn/direct/163492ae62624c768093ec89ade1e43d.jpeg)

              那这个就是跨行合并,第二行和第三行进行合并 ~!    使用   rowspan 

跨列合并 :

      **# **  colspan=" 合并单元格的个数 " 

           ![](https://img-blog.csdnimg.cn/direct/2661c6455207408cac48d3c388e3e261.png)

           将第一列和第二列进行合并 ~!!  使用 colspan 

目标单元格 :

        我们最终要合并,那肯定就要写 合并代码,那这个合并代码写在哪里呢 ??

        **===>>>**

        就是写在我们的  目标单元格身上 ~!! 

        那目标单元格是写在哪里呢 ??

        **===>>>**

        也有讲究, 看你是 跨行还是跨列 ~!

跨行的话

        **===>>>**

        那就写在 最上侧单元格为目标单元格,写合并代码

        ![](https://img-blog.csdnimg.cn/direct/f531cec3746d40428853c0e9762300c0.png)

       那比如,我们现在就合并这两个单元格,这就是跨行合并单元格

       那按照写在最上侧的单元格为目标单元格,那就是 五角星 那个单元格是目标单元格

       因为五角星是在最上侧, 所以代码就写在它这个单元格上 ~!! 

跨列的话

        ** ===>>>**

         最左侧单元格为目标单元格,写合并代码 

      ![](https://img-blog.csdnimg.cn/direct/b8c5dd952ba64ba2bea3e1d6160ac0ef.png)

          跨列是同理,那就写在最左侧即 五角星为目标单元格 ~!! 

合并的步骤 :

# 先确定是跨行还是跨列

# 找到目标单元格,写上合并方式 = 合并的单元格数量

比如  : < td colspan= "2" > </td> 

**# ** 删除多余的单元格

示例

           先弄一个 3×3 表格 出来 ,来做个基础表格

           ![](https://img-blog.csdnimg.cn/direct/0a73cda0851c44ab8fc52d9ad1485a3c.png)

           ![](https://img-blog.csdnimg.cn/direct/0e096c9571984b45954877c01b87a553.png)

                    然后,我们按照 合并的步骤 ,进行合并 ~!!

跨行合并 :

                ![](https://img-blog.csdnimg.cn/direct/d2edafc2974e4a9b884808e72cbddc7e.png)

                     我们想让上示 红色所圈的两个 单元格合并下; 即跨行合并单元格

                     那就得以 五角星单元格 为目标单元格 

                     编写代码 

                     ![](https://img-blog.csdnimg.cn/direct/66ad8999f6e74142a7e6b47d84fd8165.png)

                     那我们就要定位到    第二行 第一列 的表格处, 编写代码

                     因为是  跨行,所以是  rowspan, 是合并两个单元格,所以为 2 

                    需要注意上示,在第三行第一列 打了对勾,是因为要在第三步的时候删除该行代码

                    因为 跨行合并后,就要删除多余的单元格,所以,对于上示跨行来说,第三行第一

                    列的单元格就是  多余的单元格,需要删掉~!!

                    所以,完整的代码是 

                    ![](https://img-blog.csdnimg.cn/direct/c02695f5529d4221baafae2b1d6d31a4.png)

                    **===>>>**

               ![](https://img-blog.csdnimg.cn/direct/9ea002a983e147ab815b47b8919b68d2.png)

                     这样就实现了 第二行和第三行 第一列的跨行合并 ~!!!

跨列合并 :

                    ![](https://img-blog.csdnimg.cn/direct/af3e8f401bb54cb6ac2068b37b928f3d.png)

                   同理,要想实现上示红色所圈的单元格合并,则以蓝色五角星为目标单元格

                   ![](https://img-blog.csdnimg.cn/direct/4fc6c6f9035e4c5aabda6fd30e510f96.png)

                   定位目标单元格后,进行跨列代码 编写 

                   因为是跨列 所以是 colspan,要合并两个单元格,所以 为 2 

                   随后进行第三步,删除单元格 

                  ![](https://img-blog.csdnimg.cn/direct/58d67646fd5d430b992e13918c2c62c6.png)

                 ** ===>>>**

             ![](https://img-blog.csdnimg.cn/direct/19cae6815e59447d8fdacbd7944ee7ff.png)
标签: 前端 html

本文转载自: https://blog.csdn.net/m0_56332061/article/details/135670591
版权归原作者 三毛与海子 所有, 如有侵权,请联系我们删除。

“WEB-前端 表格标签-合并单元格”的评论:

还没有评论