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

【问题标题】：Semantic markup for complex or nested HTML tables?复杂或嵌套 HTML 表的语义标记？
【发布时间】：2017-01-19 19:10:03
【问题描述】：

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

这是一个具体的例子。第一行附有关于手臂和腿的额外信息列表。

Shadrach M 香蕉 12 武器蓝 2 腿黄色 3 Meshgah M 苹果 34 Abednego M 柿子 0

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

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

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

有没有更好、更语义化的方式？

【问题讨论】：

您可能还想尝试在 UXExchange 上提出这个问题。 uxexchange.com
我在 UXExchange 上花费的时间比这里多，但我认为这个问题与 UX 并没有真正的关系——它更多的是一个实现/编码问题。
这可能就是我在这里花的时间比在 UXExchange 多的原因...

标签： html semantic-markup tabular

【解决方案1】：

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

我认为这是一种传统 HTML 语义无法传达您正在寻找的内容的情况，您应该考虑使用 XHTML 并使用 W3C WAI 布局的 ARIA attributes 扩展它以增强现有的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>

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

【讨论】：

为了回答有关 ARIA 属性的接受程度的任何问题，我已经取得了一些成功，采用了一个相当复杂的分层树形菜单，它是数据库查询系统的一部分，并使其导航变得直观通过使用 ARIA 角色和状态的屏幕阅读器，与以前一样，它比辅助设备无法导航更糟糕。
谢谢。 +1 推荐 ARIA。

【解决方案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>

【讨论】：

多个 tbody 元素是个好主意。

【解决方案3】：

有没有更好、更语义化的方式？

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

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

【讨论】：

@Mark：“如果您使用表格进行布局（就像您一样），那么只有 UX 适合视觉用户” - 是的，这就是我的问题的重点：能否实现布局使用语义标记？如果是这样，那么它将适用于所有用户，而不仅仅是视觉用户。
@Mark：我认为你是对的：唯一的语义方法是删除嵌套表并将所有数据包含在主表中。不过，我想要的视觉样式似乎超出了当前的 CSS。

【解决方案4】：

WAI's tables tutorial 提供了处理复杂表的非常简单的介绍。原始帖子中的示例可能说明了一种multi-level table。

【讨论】：

【解决方案5】：

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

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

【讨论】：