嵌套表和表头的语义

Posted 2023-02-22

技术标签:

【中文标题】嵌套表和表头的语义【英文标题】：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 我的意思是，它传输子项是子项或更多子项各自父项的子集，并且它们不在同一个“级别”上。 【参考方案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 的建议：