Question

我有一张带有标题的表格。为了将相关信息组合在一起，我在colspan行（<th>和Total divisions）上使用Elevation，以便它们作为＆＃34;字幕＆＃34;对于他们下面的细胞。但是，我不确定这是否是在语义上这样做的合适方式。特别是，我如何确保Total divisions和Elevation仅引用其下方的行？

＆＃13;

<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>

＆＃13;

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>元素的范围限定为两个组。）

添加＆＃34;标题的语义方式＆＃34;在桌子里面

1 个答案: