表格的表头和表体如何区分？THEAD与TBODY的语义化妙用。
星夢妙者
发布： 2025-09-28 22:20:01
原创
654人浏览过
THEAD定义表格列标题，TBODY包含数据行，二者提升语义化，便于可访问性、样式控制与脚本操作。
在HTML表格中，THEAD 和 TBODY 的作用是将表格的结构语义化，帮助浏览器、开发者和辅助技术更好地区分表头与表体内容。它们并不改变视觉样式，但对可访问性、样式控制和脚本操作都有重要意义。
表头（THEAD）的作用
THEAD 包裹的是表格的列标题部分，通常只包含一行或多行用于说明各列含义的单元格。它必须作为 table 的直接子元素使用，且位于 TBODY 之前。
- 一般内部使用 TH 元素定义列名，比如“姓名”、“年龄”、“城市”
- 即使表格有多组数据行，THEAD 通常只出现一次
- 配合 CSS 可以固定表头样式，例如加粗字体或背景色
- 在打印长表格时，浏览器可自动在每页重复 THEAD 内容
表体（TBODY）的意义
TBODY 包含表格的实际数据内容，也就是除表头之外的所有数据行。它是语义上的“主体部分”，即使不写，浏览器也会自动补全。
- 允许一个表格中有多个 TBODY，用于逻辑分组数据（如按季度划分销售记录）
- 方便通过 JavaScript 精准操作某一部分数据，比如动态添加或删除某组行
- 结合 CSS 可实现隔行变色（tr:nth-child(even)），提升可读性
- 滚动表格中固定表头时，常将 TBODY 单独设置为可滚动区域
实际代码示例
<table><thead>
<tr><th>产品</th><th>价格</th><th>库存</th></tr>
</thead>
<tbody>
<tr><td>手机</td><td>3999</td><td>50</td></tr>
<tr><td>耳机</td><td>199</td><td>200</td></tr>
</tbody>
</table>
加上 THEAD 和 TBODY 后，结构更清晰，维护更容易，尤其在复杂表格或需要交互功能时优势明显。
基本上就这些。语义化标签让HTML不只是“看起来像表格”，而是“真正理解为表格”。
以上就是表格的表头和表体如何区分？THEAD与TBODY的语义化妙用。的详细内容，更多请关注php中文网其它相关文章！
最佳 Windows 性能的顶级免费优化软件
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
来源：php中文网
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
306
热门推荐
广告
收藏
