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

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

  目录

合并单元方式  : 

跨行合并 :  

跨列合并 : 

目标单元格  :

 跨行的话

 跨列的话

合并的步骤  :

跨行合并  :  

跨列合并   : 


      

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

                       

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

合并单元方式  : 

跨行合并 :  

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

               

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

跨列合并 : 

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

               

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

目标单元格  :

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

            ===>>>

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

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

            ===>>>

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

        跨行的话

            ===>>>

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

            

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

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

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

         跨列的话

             ===>>>

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

          

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

合并的步骤  :

#  先确定是跨行还是跨列

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

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

删除多余的单元格 

示例 : 

          

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

               

               

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

跨行合并  :  

                

                    

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

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

                         编写代码 

                         

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

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

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

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

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

                        所以,完整的代码是 

                        

                        ===>>>

                   

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

跨列合并   : 

                        

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

                       

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

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

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

                      

                      ===>>>

                 

转载请说明出处内容投诉
CSS教程_站长资源网 » WEB-前端 表格标签-合并单元格

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买