如何对 HTML 嵌套表进行语义编码，使其与其父表的标题对齐（和关联）

How to semantically code an HTML nested table that aligns (and associates) with its parent table's headers

提问by Evan Driscoll

Edit: The selected answer contains a link to the working fiddle I was able to compose without the use of a nested table.

编辑：所选答案包含指向工作小提琴的链接，我无需使用嵌套表即可编写。

I want to semantically code a table in HTML with a layout like the picture below. Unfortunately I haven't been able to find anything quite like it here on the network.

我想在 HTML 中对表格进行语义编码，其布局如下图所示。不幸的是，我无法在网络上找到与此类似的任何内容。

I have been able to force the look by manually setting cell widths, but I want to make sure the code I'm producing makes sense, and I don't think that's the case, because without manually setting the widths, standard rendering looks more like the following picture.

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

So far, the problematic code I have come up with looks like this:

到目前为止，我提出的有问题的代码如下所示：

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

采纳答案by powerbuoy

Without the images it's a bit hard to say, but I think a better solution than nested tables would be to simply use the colspanand rowspanattributes.

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

Edit: Seeing the images I'd say you can most definitely achieve that using rowspan(and colspanthe way you're using it already).

编辑：看到我想说的图像，您绝对可以使用rowspan（以及colspan您已经使用它的方式）实现这一目标。

Also, you don't need to set the scopeattribute if it's "col". It defaults to "col".

此外，scope如果它是“col” ，则不需要设置该属性。它默认为“col”。

Edit: As Marat Tanalin points out the scopeattribute's default value is actually autowhich "makes the header cell apply to a set of cells selected based on context". And which in my experience acts exactly the same as setting it to "col" (for screenreaders).

编辑：正如 Marat Tanalin 指出的，scope属性的默认值实际上auto是“使标题单元格应用于根据上下文选择的一组单元格”。根据我的经验，这与将其设置为“col”（对于屏幕阅读器）完全相同。

Edit: Here are two great articles on marking up advanced tables: 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/

编辑：这里有两篇关于标记高级表的很棒的文章：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

Edit: Here is the fiddleexhibiting desired behavior (visually at least) and the source code of that fiddle follows:

编辑：这是展示所需行为（至少在视觉上）的小提琴，该小提琴的源代码如下：

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

回答by caitriona

yep, as all the peeps above suggested, it's all about the rowspan.

是的，正如上面所有的窥视者所建议的，这都是关于行跨度的。

here's a re-write of your code:

这是您的代码的重写：

<table>
  <thead>
    <tr>
      <th>Type of Loss Dollar</th>
      <th>Reserve Amount</th>
      <th>Paid Amount</th>
      <th>Total This Loss</th>
      <th>Last Heading</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3"></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>