表格的表头和表体如何区分？THEAD与TBODY的语义化妙用。

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不只是“看起来像表格”，而是“真正理解为表格”。