持续创作，加速成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情
这是【HTML 教程系列第 18 篇】，如果觉得有用的话，欢迎关注专栏。
一：什么是 HTML 中的表格
定义
在 HTML 中，表格由 <table> 标签来定义，一个表格由若干行（由 <tr> 标签定义），每行又被分割为若干单元格（由 <td> 标签定义）组成。
语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
在上面的语法中包含三对 HTML 标签，分别为 < table></table>、<tr></tr>、<td></td> ，它们是创建表格的基本标签，缺一不可。
其中 <table> 和 </table> 表示整个表格的开始和结束，<tr> 和 </tr> 表示每行的开始和结束，<td> 和 </td> 表示每个单元格的开始和结束。
但一个完整的表格其实包含：table、caption、tr、th、td、thead、tbody、tfoot 这些标签，下面分别介绍每个标签的含义及用法。
1：表格中的行 tr、单元格 td
作用
tr： 用于定义表格中的行，必须嵌套在 table 标签中，在表格中有几组 tr ，就表示有多少行。 td：用于定义表格中的单元格，必须嵌套在 tr 标签中，一组 tr 中包含几对 td，就表示该行有多少个单元格。
其中，tr 是英文 table row（表格行）的缩写，td 是英文 table data（表格单元格数据）的缩写。
举例说明
代码如下所示
<table>
<tr>
<td>第一行第 1 个单元格</td>
<td>第一行第 2 个单元格</td>
</tr>
<tr>
<td>第二行第 1 个单元格</td>
<td>第二行第 2 个单元格</td>
</tr>
</table>
浏览器运行效果如下所示
难道这就是表格 ？说好的表格可以更清楚的排列数据呢 ? 这和段落标签有啥区别 ?
不要慌，因为默认情况下，表格是没有边框的，所以为了能够更直观的看到表格，我在 head 标签使用 CSS 加入了边框(后面的例子同理)，代码如下所示
<style>table,tr,td {border: 1px solid purple}</style>
如果你不知道这行代码什么意思，没关系，关注一下，后续相关技术我们慢慢来。
加入这行代码后，我们再来看看浏览器的运行效果
这就是表格，不要在乎它的外观，毕竟 HTML 只关注结构，样式那是 CSS 的事情。
2：表格中的标题 caption
作用
caption：用于定义表格标题，内容居中对齐。
语法
<table>
<caption>这里填表格标题</caption>
<tr>
<td>第一行第 1 个单元格</td>
<td>第一行第 2 个单元格</td>
</tr>
<tr>
<td>第二行第 1 个单元格</td>
<td>第二行第 2 个单元格</td>
</tr>
</table>
需要说明的是，caption 标签必须紧随 table 标签之后，并且一个表格只能有一个标题，默认情况下，标题都是位于表格的第一行。
举例说明
代码如下所示
<table>
<caption>个人信息统计表</caption>
<tr>
<td>姓名</td>
<td>性别</td>
<td>联系方式</td>
</tr>
<tr>
<td>苏醒</td>
<td>男</td>
<td>18011111111</td>
</tr>
<tr>
<td>王涛</td>
<td>女</td>
<td>18077777777</td>
</tr>
</table>
浏览器运行效果如下所示
3：表格中的表头单元格 th
作用
上面说到的 td 标签准确来说叫表行单元格，在 HTML 中，还有一种单元格，那就是表头单元格 ，用 th 标签标示。th 是英文 table header（表头单元格）的缩写。
语法
<table>
<caption>表格标题</caption>
<tr>
<th>表头单元格 1</th>
<th>表头单元格 2</th>
</tr>
<tr>
<td>表行单元格 1</td>
<td>表行单元格 2</td>
</tr>
<tr>
<td>表行单元格 3</td>
<td>表行单元格 4</td>
</tr>
</table>
举例说明
这里我仅把上面的 "个人信息统计表" 例子中第一行所有的 td 标签换成 th 标签，代码如下所示
<table>
<caption>个人信息统计表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>联系方式</th>
</tr>
<tr>
<td>苏醒</td>
<td>男</td>
<td>18011111111</td>
</tr>
<tr>
<td>王涛</td>
<td>女</td>
<td>18077777777</td>
</tr>
</table>
浏览器运行效果如下所示
可以看到，th 标签内的文字在浏览器中会以 '居中"，"粗体" 的效果显示。
下面有一个小问题：td 标签和 th 标签可以互换吗？
这个当然是不可以的，原因有二
- th 标签内的文字可以居中，并加粗显示，td 标签没有这个效果。
- 从语义上说，th 标签用于表头，td 标签用于表行。
4：表格中的表头 thead、表身 tbody、表脚 tfoot
作用
在使用表格进行布局时，可以将表格划分为表头 thead、表身 tbody、表脚 tfoot，也分别叫表格的头部、主体和页脚。
使用这三个标签，不仅可以让表格的语义更好，结构更清晰，也可以让我们的代码更具有可读性和可维护性，当然，也方便我们分块来控制表格的 CSS 样式。
语法
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格 1</th>
<th>表头单元格 2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表行单元格 1</td>
<td>表行单元格 2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>表行单元格 3</td>
<td>表行单元格 4</td>
</tr>
</tfoot>
</table>
举例说明
我们以一份成绩表为例，代码如下所示
<table>
<caption>高三(15)班成绩表</caption>
<!--表头-->
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<th>苏醒</th>
<td>100</td>
<td>110</td>
<td>120</td>
</tr>
<tr>
<th>王涛</th>
<td>100</td>
<td>110</td>
<td>120</td>
</tr>
<tr>
<th>韩信</th>
<td>100</td>
<td>110</td>
<td>120</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<th>平均分</th>
<td>100</td>
<td>110</td>
<td>120</td>
</tr>
</tfoot>
</table>
浏览器运行效果如下所示
也许你会发现，使用了这三个标签后，好像加了后和没加前的效果没啥区别啊，那为什么还要用这三个标签呢？
从显示效果上来说，加不加的确没区别，但之所以要加，原因就是这三个标签的作用。
5：表格中的行合并 rowspan、列合并 colspan
这部分内容我另外写了一篇博客 HTML 表格中的行合并与列合并
二：表格中的一些常用属性
1：align
作用 设置表格在网页中的水平对齐方式，常用属性值有 left（居左显示），right（居右显示），center（居中显示）。
2：border
作用 设置表格外边框的宽度，宽度以像素为单位，默认为0。
3：cellspacing、cellpadding
作用 cellspacing 设置单元格与单元格的间距。 cellpadding 设置单元格内容与边框的间距。
4：width、height
作用
width 设置表格的宽度，height 设置表格的高度。
上面的属性用一张图来表示的话，效果如下图
虽然这些属性显示已弃用，但不等于无用，了解一下总会是好的。
你的问题得到解决了吗？欢迎在评论区留言。
赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。
结束语
技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。
最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。
