表格标签及相关属性的介绍

    1 表格基本标签介绍

        使用场景：在网页中以行和列的单元格的方式整齐展示和数据。如学生成绩表

        代码：

                   

                       

                            

                           

                            

                       

                   

            table 是表格整体，可用于包裹多个tr

            tr 表格每行，可用于包裹td

            td 表格单元格，可用于包裹内容

        例题：

    
成绩表1
    

        

            
学号
            
姓名
            
成绩
        
        

            
001
            
张三
            
100
        
        

            
002
            
李四
            
90
        
        

            
003
            
王五
            
60
        
    

        效果图： 

 

    2 表格相关属性

        使用场景：设置表格基本展示效果

        常见相关属性：

                    border 边框宽度

                    width  表格宽度

                    height 表格高度

        注意：实际开发时针对样式效果推荐用CSS设置

        例题：

    
成绩表2
    

        

            
学号
            
姓名
            
成绩
        
        

            
001
            
张三
            
100
        
        

            
002
            
李四
            
90
        
        

            
003
            
王五
            
60
        
    

         效果图： 

 

    3 表格标题和表头单元格标签

        使用场景：在表格中表示整体大标题和一系列小标题

        代码：

                    表格大标题

                    表头单元格

        说明：

            1 caption标签表示表格整体大标题，默认在表格整体顶部居中位置显示

            2 th标签表示一系列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

        注意：

            1 caption标签书写在table标签内部

            2 th标签写在tr标签内部（用于替换td标签）

        例题：

    
成绩表3
    

        
学生成绩表
        

            
学号
            
姓名
            
成绩
        
        

            
001
            
张三
            
100
        
        

            
002
            
李四
            
90
        
        

            
003
            
王五
            
60
        
    

        效果图： 

 

    4 表格的结构标签（了解）

    使用场景：让表格内部结构分组，突出表格的不同部分（头部、主体、尾部），使语义更加清晰

    代码：

                头部

                主体

                尾部

    注意：

        1 表格结构标签内部用于包裹tr标签

        2 表格的结构标签可以省略

    例题：

    
成绩表4
    

        
学生成绩表
        

            

                
学号
                
姓名
                
成绩
            
        
        

            

                
001
                
张三
                
100
            
            

                
002
                
李四
                
90
            
            

                
003
                
王五
                
60
            
        
        

            

                
总结
                
整体成绩不错
            
        
    

         效果图： 

 

    5 合并单元格

        使用场景：将水平或垂直多个单元格合并成一个单元格

        代码：

                    rowspan="合并单元格的个数"   合并行（上下合并）

                    colspan="合并单元格的个数"   合并列（左右合并）

        说明：

            1 合并行（上下合并） 保留最上行单元格，其他删除

            2 合并列（左右合并） 保留最左列单元格，其他删除

        注意：只有同一个结果标签中的单元格才能合并，不能跨结构标签合并（即不能跨thead、tbody、tfoot）

        例题：

    
表5-1
    

        
个人评语
        

            

                
姓名
                
性别
                
评语
            
        
        

            

                
彭于晏
                
男
                
很帅，很酷
            
            

                
我
                
男
                
很帅，很酷
            
        
        

            

                
总结
                
理想男友
                
理想男友
            
        
    

    
表5-2
    

        
个人评语
        

            

                
姓名
                
性别
                
评语
            
        
        

            

                
彭于晏
                
男
                
我==彭于晏
            
            

                
我
                
男

            
        
        

            

                
总结
                
理想男友
            
        
    

        效果图：  

---

  以上是作者学习总结，分享所学，共同进步。如若哪处有误，感谢指出！