HTML table 语法
在 HTML 中，table 标签用于定义一个表格。每个表格由一行或多行组成，而每行又由一个或多个单元格组成。
HTML 中的表格，通常会由以下 3 个部分组成。
语法：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>说明：
tr 指的是 “table row（表格行）”，td 指的是 “table data cell（表格单元格）”。
<table> 和 </table> 表示整个表格的开始和结束，<tr> 和 </tr> 表示一行的开始和结束，而 <td> 和 </td> 表示一个单元格的开始和结束。
在表格中，有多少组 “<tr></tr>”，就表示有多少行。
HTML table 摘要
| 属于 | HTML 表格 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML table 示例
接下来，我们通过一个简单的例子来讲解一下 HTML table 标签是如何使用的。
示例 1：table 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 使用CSS为表格加上边框 */
table, tr, td { border: 1px solid silver; }
</style>
</head>
<body>
<table>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Vue</td>
</tr>
</table>
</body>
</html>页面效果如下图所示。
分析：
默认情况下，表格是没有边框的。在这个例子中，我们使用 CSS 加入边框，是想让大家更清楚地看到一个表格结构。
HTML table 的 “完整结构”
在 HTML 中，一个表格的 “完整结构” 不仅仅只有 table、tr、td 这 3 个标签，还包括 caption、th 等标签。
1. 表格标题：caption
在 HTML 中，表格一般都会有一个标题，我们可以使用 caption 标签来实现。
语法：
<table>
<caption>表格标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>说明：
一个表格只能有一个标题，也就是只能有一个 caption 标签。在默认情况下，标题都是位于整个表格内的第一行。
示例 2：HTML 表格的标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 这里使用CSS为表格加上边框 */
table, tr, td { border:1px solid silver; }
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>页面效果如下图所示。
分析：
默认情况下，表格是没有边框的。在这个例子中，我们使用 CSS 加入边框是想让大家更清楚地看到一个表格结构。
2. 表头单元格：th
在 HTML 中，单元格可以分为以下 2 种：
- 表头单元格：使用 th 标签来表示。其中，th 指的是 “table header cell（表头单元格）”。
- 表行单元格：使用 td 标签来表示。其中， td 指的是 “table data cell（表行单元格）”。
语法：
<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>说明：
th 和 td 在本质上都是单元格，但并不代表两者可以互换，它们之间的区别如下。
- 在显示上：浏览器会以 “粗体” 和 “居中” 来显示 th 标签中的内容，但是 td 标签不会。
- 在语义上：th 标签用于表头，而 td 标签用于表行。
当然，对于表头单元格，我们可能会使用 td 来代替 th，但不建议这样做。因为 HTML 语义化 是非常重要的。学习 HTML 的目的就是：在需要的地方用到正确的标签（也就是语义化）。
示例 3：HTML 表头单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表头单元格</title>
<style>
/* 这里使用CSS为表格加上边框 */
table, tr, td, th { border:1px solid silver; }
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>页面效果如下图所示。
分析：
默认情况下，表格是没有边框的。在这个例子中，我们使用 CSS 加入边框是想让大家更清楚地看到一个表格结构。
HTML table 的语义化
一个完整的 HTML 表格包含：table、caption、tr、th、td。为了更进一步对表格进行语义化，HTML 还引入了 thead、tbody 和 tfoot 标签。
thead、tbody 和 tfoot 把表格划分为 3 部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。
语法：
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格5</td>
<td>标准单元格6</td>
</tr>
</tfoot>
</table>示例 4：HTML 表格的语义化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格语义化</title>
<style>
/* 这里使用CSS为表格加上边框 */
table, tr, td,th { border:1px solid silver; }
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>页面效果如下图所示。
分析：
表脚（tfoot）往往用于统计数据的。对于 thead、tbody 和 tfoot 标签，不一定全部都上，例如 tfoot 就很少会用到。一般情况下，我们都是根据实际需要来使用这些标签。
thead、tbody 和 tfoot 标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚，很多人容易忽略它们。
此外，thead、tbody 和 tfoot 除了使得代码更具有语义之外，还有另外一个重要作用：方便分块来控制表格的 CSS 样式。
