如何对与其父表头部对齐(和关联)的HTML嵌套表进行语义编码

Question

编辑:所选答案包含一个指向工作小提琴的链接,我可以在不使用嵌套表的情况下编写.

我想用HTML语义编写一个表格,其布局如下图所示.不幸的是,我无法在网络上找到任何类似的东西.

我已经能够通过手动设置单元格宽度强制外观,但我想确保我生成的代码有意义,我不认为是这种情况,因为没有手动设置宽度,标准渲染看起来更多如下图.

到目前为止,我提出的有问题的代码看起来像这样:

<table>
  <thead>
    <tr>
      <th scope="col">Type of Loss Dollar</th>
      <th scope="col">Reserve Amount</th>
      <th scope="col">Paid Amount</th>
      <th scope="col">Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <th scope="row">Medical</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Indemnity</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Expense</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr>
          </tbody>
        </table>
      </td><td>
        TOTAL
      </td>
    </tr>
  </tbody>
</table>

Answer 1

没有图像,这有点难以说,但我认为比嵌套表更好的解决方案是简单地使用colspan和rowspan属性.

编辑:看到我说你可以使用的图像rowspan(以及colspan你已经使用它的方式).

此外,scope如果属性为"col" ,则无需设置属性.它默认为"col".

编辑:正如Marat Tanalin指出的那样,scope属性的默认值实际上auto是"使标题单元格应用于根据上下文选择的一组单元格".在我的经验中,与将其设置为"col"(对于屏幕阅读器)完全相同.

编辑:以下是关于标记高级表的两篇精彩文章:http://www.456bereastreet.com/archive/200910/use_the_th_element_to_specify_row_and_column_headers_in_data_tables/&http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

编辑:这是展示所需行为的小提琴(至少在视觉上),以及该小提琴的源代码如下:

<table border="1">
  <thead>
    <tr>
      <th>Status</th>
      <th>Type of Loss Dollar</th>
      <th>Reserve Amount</th>
      <th>Paid Amount</th>
      <th>Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3">Open</td>
      <td>Medical</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td rowspan="3">TOTAL</td>
    </tr><tr>
      <td>Indemnity</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr><tr>
      <td>Expense</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>