怎么在HTML中插入表格

昨天我们学习了怎么在HTML中插入列表，今天我们来学习一下

一、表格的应用场景

表格可以用于统计，比如统计班级学生的成绩，统计酒店的入住人数等

二、怎么使用表格标签

首先我们需要知道自己需要使用几行几列的表格，就输入<table>tr*行数>td*列数</table>，然后敲击回车，这里我们需要三行两列的表格，就输入<table>tr*3>td*2</table>，然后按回车，接下来我们看看VScode会显示什么

然后我们点击回车，看一下会变成什么

table有三个属性，分别是border，width和height。这个width和height大家都很熟悉了吧，是宽和高，那么这个border是什么呢，他其实是表格的边框，默认是0，我们需要调成大于0的数值他才会显示边框

接下来我们设置一个边框还有宽和高，来看一下效果

如果我们需要表格标题的话我们应该怎么做呢

我们可以把第一个<tr></tr>里面所有的<td></td>换成<th></th>

可我们又需要表格上面的大标题，我们应该怎么办呢

这时候我们可以在第一个<tr></tr>的上面输入<caption></caption>，在他俩的中间输入你想要的文字，这个时候就可以了，我们来看一下效果（用我比较喜欢的歌手来举例子，大标题为歌手，表格内小标题为男女）

我们想要合并行或者列要怎么办呢

我们可以在你想合并的行内的<td>加个rowspan="合并单元格的个数"，比如我们现在要把林俊杰和周杰伦合并起来，变成一个单元格，这时候我们就在林俊杰所在的<td>加个rowspan="2"，接下来我们试一试（合并行是把竖着的合并到一起，所以要删除你的rowspan所在同样位置的下一（2-1）个<tr>内的<td>，绿色的为删除的）

接下来看看效果

那合并列该怎么做呢，我们也是在你想合并的列的加个colspan="合并单元格的个数"，比如我们现在不把林俊杰和周杰伦合并起来，把林俊杰和邓紫棋合并起来，变成一个单元格，这时候我们就在林俊杰所在的<td>加个colspan="2"，接下来我们试一试（合并列是把横着的合并到一起，所以要删和你的colspan所在的同一（2-1）个<tr>内的<td>，绿色的为删除的）

运行一下看看效果

好啦，今天的东西就到这里，同学们记得开心，记得复习