一、前言
话说上文，我们对HTML的表单类标签进行简单的学习和认识， 分别是<form>、<input>、<textarea>、<label>、<select>和<button>这几个标签。
与表单标签有一字之别的表格标签，就是本文的主角。本篇文章将带着大家认识HTML标签中较为常用的表格标签。table标签用来表示一个表格，表格的组成我们有很多角度可以剖析，比如一个表格是由行和列组成的，比如一个表格是由表头和表主体组成的，再比如一个表格是由一个个单元格组成的。
不同角度对表格的剖析，都会对应到table标签里面包裹的子元素，下面我们就详细来介绍一下。
二、table标签
<table>标签用来表示一个表格，它是包裹在最外层的标识标签，告诉浏览器这是一个表格，标签代码示例：
<table></table>
当然，只有这个<table>标签是不够的，一般的，表格的具体内容展示还需要用到下面几个标签，分别是：<tr>、<th>、<td>。
1、<tr></tr>：表示表格中的行，有多少个<tr>标签，就有多少行。
2、<th></th>：表示表格的表头内容。
3、<td></td>：表示表格的单元格。
一般的，表头中<th>有多少个，对应的下面每一行的<td>就有多少个，如果<th>和<td>数量不相等，需要利用colspan或者rowspan属性进行合并配置，这样就可以实现单元格拆分或者合并效果了，话不多说，我们直接上代码：
（1）中规中矩类型：
<table border="3">
<tr>
<th>日期</th>
<th>吃什么</th>
</tr>
<tr>
<td>星期一</td>
<td>炭烤牛蛙</td>
</tr>
<tr>
<td>星期二</td>
<td>酸菜鱼</td>
</tr>
</table>
看看运行效果：
（2）小试牛刀类型:
<table border="3">
<tr>
<th>人员</th>
<th colspan="2">称呼</th>
</tr>
<tr>
<td>张楚岚</td>
<td>不摇碧莲</td>
<td>阳雷传人</td>
</tr>
</table>
看看运行效果：
三、table标签属性
<table>标签的属性有挺多的，常用的几个整理如下：
| 属性 | 作用 |
|---|---|
| border | 设置表格框线的宽度（px） |
| rowspan | 设置单元格要合并的行数 |
| colspan | 设置单元格要合并的列数 |
| cellpadding | 设置单元格边框与单元格内容之间的距离（px） |
| cellspacing | 设置单元格与单元格之间的距离（px） |
| width | 设置整个表格的总体宽度 |
| summary | 设置表格的摘要，不显示 |
四、其他元素
<table>标签里面可以放的元素除了<tr>、<th>、<td>这三个外，其实还有一些常用的元素，分别是：<caption>、<colgroup>、<thead>、<tfoot>、<tbody>。
1、<caption>标签：该标签是用来定义表格标题的，而且每个表格只能有一个标题，比如人员请假情况统计表，用来说明表格的主题。
代码示例：
<table border="3">
<caption>炁体源流值班表</caption>
<tr>
<th>月份</th>
<th>值班人员</th>
</tr>
<tr>
<td>6月</td>
<td>冯宝宝</td>
</tr>
<tr>
<td>7月</td>
<td>张楚岚</td>
</tr>
</table>
看看运行效果：
2、<thead>标签、<tbody>标签、<tfoot>标签：这三个标签一般都是组队出现的，分别用来表示表格的页眉、正文和页脚。作用就是当你的表格内容很多的时候，有时候甚至跨页，如果你设置了这几个标签，那么在滚动表格正文时，页眉和页脚可以独立显示。而且要打印跨页表格时，设置了的页眉和页脚也会在每页的顶部和底部打印出来，保证表格的完整性。
看看代码：
<table border="3">
<thead>
<tr>
<th>人员</th>
<th>年纪（岁）</th>
</tr>
</thead>
<tbody>
<tr>
<td>冯宝宝</td>
<td>500</td>
</tr>
<tr>
<td>张楚岚</td>
<td>19</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td>519</td>
</tr>
</tfoot>
</table>
3、<colgroup>标签：这个标签可以给表格的列进行分组，然后按照不同的分组进行不用的样式配置。它里面会放<col>标签，一般的一个表格有多少列，里面就可以放多少个<col>标签，每个<col>标签对应一列。
不过，有同学会问，那如果有很多列，不就要写好多个<col>标签，那不是很麻烦？其实<col>标签有个属性叫“span”,这个属性可以帮助我们简化写法，你可以设置span的值，这个值就是代表对应的列数。比如一个表格有三列，我想把前面两列分为一组，把这两列背景颜色设置为紫色，然后把最后一列背景颜色设置为粉红色，则对应的代码示例如下：
<table border="3">
<colgroup>
<col span="2" style="background-color:purple">
<col style="background-color:pink">
</colgroup>
<tr>
<th>人员</th>
<th>身高(cm)</th>
<th>体重（kg）</th>
</tr>
<tr>
<td>冯宝宝</td>
<td>170</td>
<td>45</td>
</tr>
<tr>
<td>张楚岚</td>
<td>176</td>
<td>65</td>
</tr>
</table>
看看效果：
五、小结
本篇为大家简单介绍了HTML标签中的table标签，喜欢本文的话，可以给博主点个小心心哦。博主在此，提前祝大家，新年快乐！
- 欢迎关注我的公众号，不仅为你推荐最新的博文，还有更多惊喜和资源在等着你!一起学习共同进步！
