这一小节，我们说一下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>
哈哈，上面的代码，其实出不了这个截图的效果，如果你拿到代码，发现有问题，记得告诉我哦。
![[Linux]对Linux中的命令的本质](https://i-blog.csdnimg.cn/direct/19e54adb69734bd3a4c20737ef94f7ee.png)
