复杂或嵌套HTML表的语义标记？

Question

当数据行包含无法放入单个表行的复杂数据时，我想知道在网页上标记表格数据的最佳方法。

这是一个具体的例子。 第一行有一个关于手臂和腿的附加信息清单。

Shadrach  M  Banana     12
  Arms  Blue    2
  Legs  Yellow  3
Meshgah   M  Apple      34
Abednego  M  Persimmon   0

除了使用包含这样的嵌套表的跨区单元格之外，还有一种很好的方法来标记它吗？

+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+
| +-------+------+-+      |
| |       |      | |      |
| +-------+------+-+      |
| |       |      | |      |
| +-------+------+-+      |
+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+

我对此并不满意，因为外表有四列，具有特定的标题和含义; 但第二行跨越所有四列并包含不同的东西。 我真的希望这些信息成为第一个项目（Shadrach）的一部分，而不是顶级表的一部分。 但HTML似乎不允许我这样做。

有更好的，更语义的方式吗？

Answer 1

如果将表放在详细信息行的第一列中，使其跨越所有四列，并将描述性表头添加到表中，那么应提供一些基本语义，以将详细信息表与其描述的列相关联。

我认为这是一个案例，虽然传统的HTML语义无法传达您正在寻找的内容，您应该考虑使用XHTML并使用W3C WAI布局的ARIA属性扩展它以扩充现有的XHTML语义来描述复杂的像你想要创建的那样的结构。 也许如果您向详细信息表描述的单元格添加了aria-describedby属性，那么将提供您正在寻找的其他语义：

<table>
     <thead>
        <tr>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
          <th>column 4</th>
        </tr>
     </thead>
     <tbody>
        <tr>
          <td id="master" aria-describedby="detail">Shadrach</td>  
          <td>M</td>  
          <td>Banana</td>     
          <td>12</td>
        </tr>
        <tr>
          <td colspan="4">
             <table id="detail">
                <tbody>
                   <tr>
                      <td>arms</td>
                      <td>blue</td>
                      <td>2</td>
                   </tr> 
                   <tr>
                      <td>legs</td>
                      <td>yellow</td>
                      <td>3</td>
                   </tr>
                </tbody>
             </table>
          </td>
        </tr>
     </tbody
 </table>

您可能会发现许多有用的咏叹调角色和属性，例如，具有分层布局和扩展行的表的treegrid角色。 看看ARIA的工作草案，我相信你会找到一些可以描述你想要传达的东西的东西。

Answer 2

在尝试使标记更具语义性时，您需要问自己的一件事是您正在做什么。 语义标记具有价值，因为它更容易设置样式，并应用不同的样式表，而无需为您正在使用的标记自定义它们。 它具有价值，因为它有助于访问，使屏幕阅读器或替代渲染引擎更容易适当地分析它。 有时候它有价值，因为搜索引擎或其他自动化工具可以从中提取信息。

但是，有时您会遇到HTML无法处理的情况。 这似乎是其中之一。 HTML没有任何方法可以在具有与表的其他列不匹配的列的表中嵌套分层数据。 所以，你需要用你所拥有的东西做到最好。 在这一点上，担心使它更具语义并不能给你带来太大的收获; 你正在做一些相当特殊的事情，其他样式表，屏幕阅读器和工具可能都不知道该怎么做，所以你想出的任何解决方案都不完全违背元素的用途问题还可以。

我认为你提到的解决方案是关于你能做的最好的。 将包含嵌套表的行标记为一个类，该类指示它们与其他行不同，并将其称为好。 如果您愿意，可以使用多个<tbody>元素将它们与它们所附着的行组合在一起：

<table>
<tbody>
  <tr><td>Shadrach  <td>M  <td>Banana     <td>12
  <tr class=nested><td colspan=4>
    <table>...</table>
<tbody>
  <tr><td>Meshgah   <td>M  <td>Apple      <td>34
<tbody>
  <tr><td>Abednego  <td>M  <td>Persimmon   <td>0
</table>

Answer 3

有更好的，更语义的方式吗？

是的 - 不要在那里放置嵌套表。 Arms / Legs应该是原始表格上的更多列，或者是一个单独的表格。 然后根据需要使用CSS进行样式¹ 。

¹不，我不知道你怎么可能用语义HTML和CSS获得相同的视觉效果。 但那不是重点。 您正在寻找语义标记 - 而不是如何使其与您认为适合的UI相适应（提示：如果您使用表格进行布局（就像您一样）那么它只适用于视觉用户的UX）。

Answer 4

WAI的表格教程提供了处理复杂表格的简单介绍。 原始帖子中的示例可能会说明一种多级表 。

Answer 5

除非您的信息具有明确的语义，否则没有单一的方法可以做到这一点。 您似乎在行内部具有树状结构，并且某些嵌套DIV可能很有用。 因此，有可能有一个行单元格的DIV子项，尽管使用起来很复杂。 或者，您可以尝试创建嵌套表（TABLE作为内容或单元格）。

如果你想保留复杂的语义，那么HTML不是最好的方法，也许你应该使用XML表示或RDF。 这些都可以转换为HTML进行显示，同时保留语义。