【HTML入门】第十课 - 表格，也就是table标签

这一小节，我们说一下HTML中的表格。比如我们常常看见的学生成绩单，比如excel一个单元格一个单元格的，这些都是表格。

表格的标签名是 table 。

目录

1 表格中的一些子标签

1.1 表头区域

1.2 表格内容区域

1.3 行和列

2 实战一小下

2.1 做个简单的成绩单

2.2 加上边框线

2.3 跨行

2.4 跨列

---

1 表格中的一些子标签

1.1 表头区域

比如成绩单，顶部表头总得有学号、学生姓名、科目、成绩、总成绩 这些字段，对吧。

这些字段都会放到表头里，这就需要一个 thead 的标签。

1.2 表格内容区域

那么表格内容区域呢，就需要有更详细的数据了，比如学号是001，姓名是张三，科目是数学，成绩是80，如果没有别的科目呢，总成绩就是80，如果有其他的科目呢，再累加，对吧。

这些内容都会放到表格内容区域里，这就需要一个 tbody 标签。

1.3 行和列

表格，都是一行一行的，然后再切割成一列一列的，这样切割完了就是，一块一块的，就成了单元格，一个小方格一个小方格的样子了。

而且呢，注意：是行包含着列，这个要记住。

行的标签名是 tr  。

表头的单元格标签是 th ， 表格身体区域的单元格标签是 td 。

2 实战一小下

2.1 做个简单的成绩单

    
        
        我的第一个网页
        
            
        
    
    
        

学号	姓名	语文成绩	数学成绩	HTML成绩	总成绩
1	张三	80	90	96	266
2	李四	71	80	100	251

2.2 加上边框线

 这样显示有点乱，加上边框线，让表格好看一些。可以加个 border="1" 的属性设置，看下面代码，然后刷新一下网页，看是不是好看多了呢。

    
        
        我的第一个网页
        
            
        
    
    
        

学号	姓名	语文成绩	数学成绩	HTML成绩	总成绩
1	张三	80	90	96	266
2	李四	71	80	100	251

2.3 跨行

当然，我们还可以搞一个跨行的展示，比如张三和李四是 1班 的，让他们放到同一个大行里，然后1班 的同学占2行。

然后再加一个 2班，班里有 王五 和 赵六，让他们也占用一个大行，这样2班，就会有2个小行。

这里需要设置的 rowspan 属性。

    
        
        我的第一个网页
        
            
        
    
    
        

学号	班级	姓名
1	1班	张三
2	李四
3	2班	王五
4	赵六

看上面的代码，我们给 td 单元格 设置了 rowspan 的属性，然后同样是 1班 的第二个单元格，就不需要添加相同的 td 代码了。

2.4 跨列

跨列呢，就是几个列，具有相同的特性，所以显示一个列信息就够了。就像刚才的跨行，目的不就是 张三 和 李四都是1班的，所以为了不冗余显示，因为他们都有相同的信息属性，都是1班，所以显示一个 1班 ，跨行一下就够了。

跨列呢，就是说好几列合并起来呗。比如我们举个例子。

    
        
        我的第一个网页
        
            
        
    
    
        

学号	班级	姓名	成绩
1	1班	张三	90
2	李四	80
1班总人数：2，总成绩：170
3	2班	王五	70
4	赵六	100
4	冯七	75
2班总人数：3，总成绩：245

哈哈，上面的代码，其实出不了这个截图的效果，如果你拿到代码，发现有问题，记得告诉我哦。