HTML表格语义化疑问：行展开详情的结构设计是否合理？

嘿，这个问题我碰到过好多次了，刚好能给你梳理几个既符合语义化又满足交互需求的方案：

方案一：HTML表格 + colspan（最贴合原始需求的语义化方案） #

其实你担心的“把Info单元格放在独立行并跨所有列不符合语义化”是多余的，这种用法完全符合HTML表格的语义规范！

因为展开的详情本来就是对应上方那一行预订数据的补充内容，我们可以把每个数据行和它的详情行放在同一个逻辑分组里（比如<tbody>里的相邻行），详情行的<td>用colspan="5"（对应你原始的5列）来跨所有列，这样结构清晰，语义明确，浏览器和辅助设备也能正确识别这种关联关系。

给你个简单的代码示例：

<table>
  <thead>
    <tr>
      <th>Reference</th>
      <th>Name</th>
      <th>Date</th>
      <th>Status</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <!-- 第一组：数据行 + 详情行 -->
    <tr class="booking-row">
      <td>REF-001</td>
      <td>Adam Hughes</td>
      <td>2024-06-15</td>
      <td>Confirmed</td>
      <td>Premium</td>
    </tr>
    <tr class="booking-details">
      <td colspan="5">
        <p>预订详情：包含免费早餐，入住时间14:00后，退房时间12:00前...</p>
        <p>联系人电话：123-456-7890</p>
      </td>
    </tr>

    <!-- 第二组 -->
    <tr class="booking-row">
      <td>REF-002</td>
      <td>Jane Smith</td>
      <td>2024-06-20</td>
      <td>Pending</td>
      <td>Standard</td>
    </tr>
    <tr class="booking-details">
      <td colspan="5">
        <p>预订详情：需在24小时内完成付款确认...</p>
      </td>
    </tr>
  </tbody>
</table>

之后你只需要用JS控制.booking-details的显示/隐藏（点击对应的.booking-row切换状态），或者用CSS的相邻兄弟选择器配合:focus/:active来实现纯CSS折叠，都很方便。

方案二：用<details> + <summary>做可折叠卡片（交互语义更直观） #

如果你觉得表格的结构有点死板，或者详情内容比较复杂（比如包含图片、表单等非纯文本内容），可以考虑用<details>和<summary>标签来构建可折叠的卡片布局，同时用CSS模拟表格的列对齐效果。

这个方案的优势在于，<details>本身就是HTML原生的可折叠组件，语义上明确告诉用户“这里有可展开的内容”，不需要额外的JS就能实现基础的折叠功能。

示例代码：

<style>
  .booking-card {
    margin: 8px 0;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  .booking-summary {
    display: flex;
    padding: 12px;
    cursor: pointer;
    font-weight: 500;
  }
  .booking-summary .col {
    flex: 1;
    text-align: left;
  }
  .booking-details {
    padding: 0 12px 12px;
    border-top: 1px solid #eee;
  }
</style>

<div class="booking-card">
  <details>
    <summary class="booking-summary">
      <span class="col">REF-001</span>
      <span class="col">Adam Hughes</span>
      <span class="col">2024-06-15</span>
      <span class="col">Confirmed</span>
      <span class="col">Premium</span>
    </summary>
    <div class="booking-details">
      <p>预订详情：包含免费早餐，入住时间14:00后，退房时间12:00前...</p>
      <p>联系人电话：123-456-7890</p>
    </div>
  </details>
</div>

怎么选？ #

• 如果你的数据是典型的表格型数据，需要严格的列对齐，用户更习惯表格的浏览方式，方案一是最优解，完全符合语义化，不用有顾虑。
• 如果你的详情内容复杂，或者想做更个性化的交互样式，方案二更灵活，语义化也没问题，还能借助原生组件的优势。

总之，不用放弃HTML表格，colspan的用法是完全合规的，放心用就好！

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