4

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

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是嵌套表？
4

4 回答 4

4

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

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

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

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

渲染表

显然你可以用 CSS 来解决这个问题，但是一段 HTML 的无样式渲染通常是它语义的一个很好的指南。

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

没有标准的方法来表示 HTML 中表的行之间的层次关系。不过，从我给出的类似问题的答案中抄袭，您可以使用额外的类、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属性进行设置，例如，将鼠标悬停在一行上会使其父级突出显示。

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

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

于 2013-09-21T18:33:28.953 回答
1

这是 W3C 的建议：

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

你可以锁定这篇文章：构建语义 html 表的最佳方法

hope that will help you to get your answer

于 2013-09-21T18:46:39.560 回答
0

Talking about semantics requires us to have more time than to find an answer for your question.

But for a whole point, this link should help you. That page contains all the information you may be interested in. Interestingly unlike normal 'declarative' spec w3c writes, it has 'suggestive' writing about the question in this context. You may wish to read right from the start.

于 2013-09-24T13:41:41.870 回答
0

I think putting the children in a separate table is the wrong way to go. Nested tables are not like nested lists; they don't carry that same semantic hierarchy. It seems everything should be within the same table if it all lists the same information.

For example, if your table had the headers 

REGION    POPULATION     AREA

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

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

于 2013-09-25T18:33:13.423 回答