【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 做个简单的成绩单

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><table><thead><tr><th>学号</th><th>姓名</th><th>语文成绩</th><th>数学成绩</th><th>HTML成绩</th><th>总成绩</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>80</td><td>90</td><td>96</td><td>266</td></tr><tr><td>2</td><td>李四</td><td>71</td><td>80</td><td>100</td><td>251</td></tr></tbody></table></body>
</html>

2.2 加上边框线

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><table border="1"><thead><tr><th>学号</th><th>姓名</th><th>语文成绩</th><th>数学成绩</th><th>HTML成绩</th><th>总成绩</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>80</td><td>90</td><td>96</td><td>266</td></tr><tr><td>2</td><td>李四</td><td>71</td><td>80</td><td>100</td><td>251</td></tr></tbody></table></body>
</html>

2.3 跨行

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

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

这里需要设置的 rowspan 属性。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><table border="1"><thead><tr><th>学号</th><th>班级</th><th>姓名</th></tr></thead><tbody><tr><td>1</td><td rowspan="2">1班</td><td>张三</td></tr><tr><td>2</td><td>李四</td></tr><tr><td>3</td><td rowspan="2">2班</td><td>王五</td></tr><tr><td>4</td><td>赵六</td></tr></tbody></table></body>
</html>

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

2.4 跨列

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

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><table border="1"><thead><tr><th>学号</th><th>班级</th><th>姓名</th><th>成绩</th></tr></thead><tbody><tr><td>1</td><td rowspan="2">1班</td><td>张三</td><td>90</td></tr><tr><td>2</td><td>李四</td><td>80</td></tr><tr><td colspan="4">1班总人数：2，总成绩：170</td></tr><tr><td>3</td><td rowspan="2">2班</td><td>王五</td><td>70</td></tr><tr><td>4</td><td>赵六</td><td>100</td></tr><tr><td>4</td><td>冯七</td><td>75</td></tr><tr><td colspan="4">2班总人数：3，总成绩：245</td></tr></tbody></table></body>
</html>