Question

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

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？

Answer 1

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

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

通过创建一个跨越表中所有列的单元格，然后在具有相同列数的内部构建另一个表，您还可以有效地说“这些是其他列，与外表中的那些无关。“

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

Rendered table

显然你可以用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;
}

......结果如下：

Rendered table

使用一些小的javascript，您还可以使用id和data-parent属性进行设置，例如将鼠标悬停在某一行会导致其父项突出显示。

这两个表的表标题是否负责，还是我必须创建一个新表？

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

Answer 2

这是W3C的建议：

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

你可以锁定这篇文章：Best way to construct a semantic html table

希望能帮助您获得答案

Answer 3

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

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

Answer 4

我认为把孩子放在一张单独的桌子上是错误的方法。嵌套表与嵌套列表不同;它们不具有相同的语义层次结构。如果全部列出相同的信息，似乎一切都应该在同一个表中。

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

REGION    POPULATION     AREA

然后你可以有item1 = Earth，item2 = France，item3 = Paris ......如果法国是地球的孩子或者巴黎是法国的孩子，那真的不重要;除了CSS样式之外，你最好还是把它全部保存在一个表中而不是尝试做父/子关系。

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

嵌套表和表头的语义

4 个答案: