HTML表格通过<tbody>标签组织主体数据行，位于<thead>之后、<tfoot>之前，用于提升结构清晰度与语义化；每个<tr>表示一行数据，由多个<td>单元格组成，列数需与表头<th>一致；支持多个<tbody>分组数据，便于按逻辑划分（如季度）；结合CSS可实现斑马条纹（tbody tr:nth-child(even)）、打印防断裂（break-inside: avoid），结合JavaScript可高效操作特定数据区域，提升样式控制与脚本处理效率。
HTML表格的主体区域通过<tbody>标签进行组织，它用于包裹表格中除表头和表尾之外的数据行。合理使用
<tbody></代码>能提升表格结构清晰度，有利于样式控制和脚本操作。</p> <H3><strong>tbody的作用与基本语法</strong></H3> <p><code><tbody>是表格内容的主体部分，通常紧跟在
<thead>之后，位于<tfoot>之前（如果存在）。浏览器会据此对内容进行语义划分，便于读取和渲染。
基本结构示例如下：
<table>
<thead>
<tr><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>25</td></tr>
<tr><td>李四</td><td>30</td></tr>
</tbody>
</table>
如何正确构建tbody内的数据行
在<tbody>中应只包含代表数据记录的<tr>元素，每行再由若干<td>单元格组成。
- 每个
<tr>表示一行数据 -
<td>用于存放具体数据，不可嵌套其他块级元素 - 列数需与
<thead>中的<th>数量一致，以保证结构对齐 - 可为不同行添加class以便样式区分或JS操作
多个tbody的使用场景
一个表格可以包含多个<tbody>，适用于将数据按逻辑分组，比如按月份、类别或状态划分。
立即学习“前端免费学习笔记（深入）”；
示例：按季度分组销售数据
<tbody class="q1"> <tr><td>一月</td><td>100万</td></tr> <tr><td>二月</td><td>120万</td></tr> </tbody> <tbody class="q2"> <tr><td>四月</td><td>110万</td></tr> <tr><td>五月</td><td>130万</td></tr> </tbody>
这样更方便用CSS隐藏某组数据，或用JavaScript单独处理某一区块。
与CSS和JavaScript的配合使用
利用<tbody>的语义化特性，可以轻松实现隔行变色、折叠分组、动态加载等功能。
- CSS中用
tbody tr:nth-child(even)实现斑马条纹 - 通过
document.querySelector('tbody')快速获取数据区域 - 动态插入行时，直接操作
tbody比操作整个table更高效 - 打印时可设置
@media print { tbody { break-inside: avoid; } }避免跨页断裂
基本上就这些。正确使用<tbody>不仅让HTML结构更清晰，也为后续维护和交互打下良好基础。
