嵌套表和表头的语义答案

【问题标题】：Semantic of nested tables and table header嵌套表和表头的语义
【发布时间】：2013-09-16 16:29:46
【问题描述】：

我有一个表格，其中元素可以有具有相同属性的子元素，例如：

ITEM    ATTRIBUTE 1    ATTRIBUTE 2
item    value          value
 sub    value          value
 sub    value          value
item    value          value

从这里我创建了一个这样的标记：

<table>
    <thead>
        <tr>
            <th>ITEM</th>
            <th>ATTRIBUTE 1</th>
            <th>ATTRIBUTE 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr>
            <td colspan=3>
                <table>
                    <tbody>
                        <tr>
                            <td>sub</td>
                            <td>value</td>
                            <td>value</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>item</td>
            <td>value</td>
            <td>value</td>
        </tr>
    </tbody>
</table>

我现在的问题是：

这是最好的语义解决方案吗？
其他方法更适合吗？如果是，推荐的方式是什么？
是表头负责这两个表还是我必须创建一个新表头（嵌套表可能使用visibility: hidden？

【问题讨论】：

是的，终于获得了 75 声望，开始了所谓的赏金活动。哦，我失去了在任何地方发表评论的可能性。嗯。
我会避免嵌套表格，它会在单元格中插入一个新表格，这不是您想要的。如果您只有 1 级关系，为什么不保持表格平整并使用 css 来识别项目与子项目。 <tr class="item">...</tr><tr class="subitem">...</tr>
@kalhartt 是的，但这并不能反映子项的语义，或者是吗？我也想过这个，但它只会产生视觉上的差异。
如果你适当地设置类的样式并且它很容易解析与任何 dom 操纵器的关系，它会在视觉上反映出来。您希望具体体现的含义如何。
@kalhartt 我的意思是，它传输子项是子项或更多子项各自父项的子集，并且它们不在同一个“级别”上。

标签： html html-table semantics nested-table

【解决方案1】：

这是最好的语义解决方案吗？

不是真的。虽然将元素 A 嵌套在另一个元素 B 中的行为可用于指示 A 是 B 的子级，但这不是您在这里所做的：您将表嵌套在完全不同的行中，所以有没有暗示 A 和 B 之间的父子关系。

通过创建一个跨越表格中所有列的单元格，然后在其中构建另一个具有相同列数的表格，您实际上也可以说“这些是一些 other 列，与外部表中的无关”。

您可以通过在上面的示例中为单元格添加边框来查看列之间的隐含（缺少）关系：

显然，您可以使用 CSS 解决这个问题，但一段 HTML 的无样式呈现通常是其语义的良好指南。

另一种方法更适合吗？如果是，推荐的方式是什么？

没有标准的方法来表示 HTML 中表格的行之间的层次关系。不过，从an answer I gave to a similar question 抄袭，您可以使用额外的类、id 和data- 属性：

<table>
    <thead>
        <tr>
            <th>ITEM</th>
            <th>ATTRIBUTE 1</th>
            <th>ATTRIBUTE 2</th>
        </tr>
    </thead>
    <tbody>
        <tr id=100>
            <td>item</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr id=110 data-parent=100 class=level-1>
            <td>sub</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr id=200>
            <td>item</td>
            <td>value</td>
            <td>value</td>
        </tr>
    </tbody>
</table>

父子关系在无样式渲染中是不可见的（据我所知，没有其他方法可以在不添加额外内容的情况下做到这一点），但是有足够的钩子来添加所需的 CSS ：

.level-1 > td:first-child {
    padding-left: 1em;
}

...这会导致：

使用一点 javascript，您还可以使用 id 和 data-parent 属性进行设置，例如将鼠标悬停在一行上会突出显示其父级。

是表头负责这两个表，还是我必须创建一个新表头？

在您提出的解决方案中，创建一个跨越所有列的单元格，然后在其中构建另一个表格意味着标题单元格与“子”行的单元格之间没有隐含关系。显然我上面建议的解决方案没有这个问题。

【讨论】：

您在开头的两段准确地描述了我的担忧，我的（间接）问题似乎得到了回答 - 不幸的是：“没有标准的方法来表示表格行之间的层次关系在 HTML 中。”
很好的解决方案，但是如果我想使用模板渲染表格，这个解决方案不会产生问题吗？
@DigvijayYadav 怎么样？如果有两个以上的级别，一行将需要知道它在层次结构中的深度，但这对于提供数据的任何东西都可以在必要时进行跟踪（如果只有两个级别，只需知道有一个父级）足够的）。在任何合理的模板语言中，其余的都是微不足道的。

【解决方案2】：

这是 W3C 的建议：

目前，那些希望确保整个 Assistive 提供一致支持的人标题不在第一行/列中的表格的技术可能需要将技术用于复杂表 H43：使用 id 和 headers 属性将数据单元格与数据表中的标题单元格相关联。对于具有第一列或第一行的标题我们建议使用 th 和 td 元素。

你可以锁定这个帖子：Best way to construct a semantic html table

希望能帮助你得到答案

【讨论】：

谢谢。（+1）。

【解决方案3】：

谈论语义需要我们有更多的时间而不是为您的问题找到答案。

但总的来说，this link 应该可以帮助您。该页面包含您可能感兴趣的所有信息。有趣的是，与 w3c 所写的普通“声明性”规范不同，它在此上下文中对问题进行了“建议性”写作。您可能希望从头开始阅读。

【讨论】：

【解决方案4】：

我认为将孩子放在单独的桌子上是错误的做法。嵌套表不像嵌套列表；它们不具有相同的语义层次结构。如果所有内容都列出相同的信息，那么似乎所有内容都应该在同一个表中。

例如，如果您的表格有标题

REGION    POPULATION     AREA

那么你可以有 item1 = 地球，item2 = 法国，item3 = 巴黎......如果法国是地球的孩子或巴黎是法国的孩子，这并不重要；你最好还是把它全部放在一张桌子上，而不是尝试在 CSS 样式中建立父/子关系。

如果在没有人知道父/子关系的情况下您的表格真的无法理解，您能否举一个表格数据的示例，以便我更好地理解如何构建它？

【讨论】：