垂直表头表格中<thead>与<tbody>的最佳放置方式探讨

首先明确：<thead>的核心作用是语义化标记表格中属于“表头”的行组，和表头是水平还是垂直排列没有直接绑定，要不要加、怎么加，完全看表格的逻辑结构。

常见情况：无需添加<thead> #

像你给出的那种典型垂直表头表格——每一行左侧是<th>（行的表头）、右侧是<td>（对应内容）——整个表格没有独立的、成组的“表头区域”，所有行都是“数据行+行内表头”的组合。这种情况下，直接用<tbody>包裹所有行就足够，硬加<thead>反而会割裂语义，完全没必要。

示例（优化了语义，加上scope属性增强可访问性）：

<table style="width:100%">
  <tbody>
    <tr>
      <th scope="row">姓名:</th>
      <td>比尔·盖茨</td>
    </tr>
    <tr>
      <th scope="row">电话:</th>
      <td>555 77 854</td>
    </tr>
    <tr>
      <th scope="row">电话:</th>
      <td>555 77 855</td>
    </tr>
  </tbody>
</table>

特殊情况：可以添加<thead> #

如果你的垂直表头表格存在独立的、全局的表头行（比如顶部有一行总标题，或者有一组不属于数据行的表头内容），这时候可以把这部分行放进<thead>，剩下的垂直表头数据行放进<tbody>，以此明确区分“全局表头”和“数据主体”。

示例：

<table>
  <thead>
    <tr>
      <th colspan="2">用户基本信息</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">姓名:</th>
      <td>比尔·盖茨</td>
    </tr>
    <tr>
      <th scope="row">电话:</th>
      <td>555 77 854</td>
    </tr>
  </tbody>
</table>

关键原则 #

<thead>是可选元素，核心看语义逻辑：

• 没有独立表头行组，就别硬加；
• 有明确的全局表头区域，用<thead>包裹，增强语义和可访问性。

内容的提问来源于stack exchange，提问作者Kwok