如何对与嵌套表的标题对齐(并关联)的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屋！