如何对 HTML 嵌套表进行语义编码，使其与其父表的标题对齐(和关联) [英] How to semantically code an HTML nested table that aligns (and associates) with its parent table's headers

问题描述

选定的答案包含指向我能够在不使用嵌套表的情况下编写的工作小提琴的链接.

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

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

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.

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

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>

推荐答案

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

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 colspan and rowspan attributes.

看到我想说的图像，您绝对可以使用 rowspan(以及 colspan 您已经使用的方式)实现这一点.

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

此外，如果 scope 属性是col"，则不需要设置它.默认为col".

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

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

As Marat Tanalin points out the scope attribute's default value is actually auto which "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).

这里有两篇关于标记高级表格的精彩文章: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/

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/

这是小提琴表现出所需的行为(至少在视觉上)，该小提琴的源代码如下:

Here is the fiddle exhibiting 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>

这篇关于如何对 HTML 嵌套表进行语义编码，使其与其父表的标题对齐(和关联)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！