HTML tbody 语法
在 HTML 中,tbody 是一个结构语义标签,用于定义表格的主体部分。它通常与 thead、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>说明:
thead、tbody、tfoot 这 3 个标签主要是用于实现表格的语义划分,它们之间的区别如下。
thead:用于包含表格的 “表头” 部分。tbody:用于包含表格的 “表身” 部分。tfoot:用于包含表格的 “表脚” 部分。
注意:
- tbody 必须是 table 的直接子元素。
- 在一个 table 中,tbody 只能出现一次。
HTML tbody 摘要
| 属于 | HTML 表格 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML tbody 示例
接下来,我们通过一个简单的例子来讲解一下 HTML tbody 标签是如何使用的。
示例:tbody 标签的基本用法
<!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 样式。
