前端基础入门（7）表格

目录

• 表格的基本结构
• 表格的标准结构
• 表格的行、列合并
• 表格的CSS样式

---

表格的基本结构

表格是网页上最常见的元素，它除了可以用来展示数据，还常常被用来排版。虽然现在提倡使用DIV+CSS完成页面布局，但表格框架简单明了，对于繁杂的数据，一个简洁的表格能让其展现的极有条理。

简单来说，表格是由行、列（单元格）组成。表格由

标签来定义。每个表格均有若干行（由 标签定义），每行又由若干单元格（即列，由

标签定义）组成。表格单元格里可以包含文本、图片、列表、段落、表单、水平线、表格（嵌套）等等。

别罗嗦，看代码。

下面的代码是一个两行两列的表格。

    


    
        
        

            
姓名

            
张三

        
        

            
民族

            
汉族

        
    

表格默认是没有边框的，下面的效果图加入了边框，目的是能让表格的结构更清晰。

表格的标准结构

表格除了行和单元格，还可以有标题和表头。另外，表格的语义化还将表格分为表格页眉、表格主体、表格页脚三个部分。引入语义化，能够让表格结构更清晰、代码语义更良好。

下面的示例代码加入了标题和表头，同时引入了表格语义化，将表格分为页眉、主体。页脚三个部分，表格语义化是否添加不会影响到表格的显示效果。

    


    
        
        
第一学期学生成绩表

        

            

                
姓名

                
语文
                
数学
                
物理
            
        
        

            

                
张小明
                
80
                
90
                
80
            
            

                
王小花
                
90
                
70
                
80
            
        
        

            

                
平均分
                
85
                
80
                
80
            
        
    

表格默认是没有边框的，下面的效果图加入了边框，目的是能让表格的结构更清晰。

表格的行、列合并

在表格的实际应用中，经常需要将表格相邻的两个或多个单元格合并，以满足不同长度或不同类型的数据展示。

标签的【rowspan】属性可以实现合并行， 标签的【colspan】属性可以实现合并列，

示例代码：

    
    


    
   
        

            
姓名:
            
小叮当

            

        
        

            
作品:
            
哆啦A梦
        
        

            
简介:

            
来自一部漫画作品
        
    

表格默认是没有边框的，下面的效果图加入了边框，目的是能让表格的结构更清晰。

表格的CSS样式

表格默认是没有边框的，我们可以使用border属性为table设置边框。上面的代码都是加入边框，可以看到，表格都是双线条边框，这是由于 table、th 以及 td 元素都有独立的边框。【border-collapse】属性可以设置是否把表格边框合并为单一的边框，该属性的取值主要有两个，值【separate】为默认值，表示边框分开不合并，值【collapse】为合并边框。

当表格的边框属性【border-collapse】的值为默认值【separate】，即边框分开时，我们还可以利用属性【border-spacing】来设置相邻单元格的边框间的距离。该属性可以设置一个或两个像素值，当设置一个像素值时，表示水平和垂直间隔为同一值；如果设置了两个值，则第一个为水平间距，第二个为垂直间距。

示例代码：

    
    
    


    

        

            
单元格1
            
单元格2
        
        

            
单元格1
            
单元格2
        
    
    

    

        

            
单元格1
            
单元格2
        
        

            
单元格1
            
单元格2
        
    

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。