在 table 中添加 "caption" 的语义方法

Question

我有一个有标题的 table。为了将相关信息组合在一起，我在 <th> 行（Total divisions 和 Elevation）上使用了 colspan，以便它们作为它们下方单元格的 "captions"。但是，我不确定这是否是在语义上进行操作的合适方法。特别是，我如何确保 Total divisions 和 Elevation 只会引用它们下面的行？

<table>
  <caption>Summary</caption>
  <tr>
    <th>Name</th>
    <td>Santo Cristo</td>
  </tr>
  <tr>
    <th>Area</th>
    <td>67.99 km<sup>2</sup></td>
  </tr>
  <tr>
    <th scope="row" colspan="2">Total divisions</th>
  </tr>
  <tr>
    <th scope="row">Cities</th>
    <td>4</td>
  </tr>
  <tr>
    <th scope="row">Villages</th>
    <td>45</td>
  </tr>
  <tr>
    <th scope="row" colspan="2">Elevation (masl)</th>
  </tr>
  <tr>
    <th scope="row">Highest point</th>
    <td>12 meters</td>
  </tr>
  <tr>
    <th scope="row">Lowest point</th>
    <td>0 meters</td>
  </tr>
</table>

Answer 1

将您的行分组到 <tbody> 元素中，并将每个摘要 <th> 的范围限定到其父级 <tbody>，用 scope="rowgroup" 代替 scope="row"，如下所示：

<table>
  <caption>Summary</caption>
  <thead>
    <tr>
      <th>Name</th>
      <td>Santo Cristo</td>
    </tr>
    <tr>
      <th>Area</th>
      <td>67.99 km<sup>2</sup></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" colspan="2">Total divisions</th>
    </tr>
    <tr>
      <th scope="row">Cities</th>
      <td>4</td>
    </tr>
    <tr>
      <th scope="row">Villages</th>
      <td>45</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th scope="rowgroup" colspan="2">Elevation (masl)</th>
    </tr>
    <tr>
      <th scope="row">Highest point</th>
      <td>12 meters</td>
    </tr>
    <tr>
      <th scope="row">Lowest point</th>
      <td>0 meters</td>
    </tr>
  </tbody>
</table>

（第一组可以是 <thead> 或另一个 <tbody>，具体取决于您的偏好，但重要的是您尝试确定 <th> 元素范围的两个组到。）

在 table 中添加 "caption" 的语义方法

Semantic way to add a "caption" inside a table

html

html-table

semantic-markup