复杂或嵌套 HTML 表的语义标记？
我想知道当数据行包含无法容纳在单个表行中的复杂数据时，在网页上标记表格数据的最佳方法。
这是一个具体的例子。第一行附有有关手臂和腿的额外信息列表。
Shadrach M Banana 12 Arms Blue 2 Legs Yellow 3 Meshgah M Apple 34 Abednego M Persimmon 0
除了使用包含这样的嵌套表的跨单元格之外，还有什么好方法来标记它吗？
+-------+--+--------+-----+ | | | | | +-------+--+--------+-----+ | +-------+------+-+ | | | | | | | | +-------+------+-+ | | | | | | | | +-------+------+-+ | +-------+--+--------+-----+ | | | | | +-------+--+--------+-----+ | | | | | +-------+--+--------+-----+
我对此并不完全满意，因为外表有四列，具有特定的标题和含义；但第二行跨越所有四列并包含不同的内容。我真的希望此信息成为第一个行项目 (Shadrach) 的一部分，而不是顶级表的一部分。但 HTML 似乎不允许我这样做。
有没有更好、更语义化的方式？
I want to know the best way to mark up tabular data on a web page when data rows contain complex data that can't fit within a single table row.
Here's a concrete example. The first line has a list of extra information attached to it about arms and legs.
Shadrach M Banana 12 Arms Blue 2 Legs Yellow 3 Meshgah M Apple 34 Abednego M Persimmon 0
Is there a good way to mark this up other than using a spanned cell containing a nested table like this?
+-------+--+--------+-----+ | | | | | +-------+--+--------+-----+ | +-------+------+-+ | | | | | | | | +-------+------+-+ | | | | | | | | +-------+------+-+ | +-------+--+--------+-----+ | | | | | +-------+--+--------+-----+ | | | | | +-------+--+--------+-----+
I'm not completely happy with this because the outer table has four columns, with specific headings and meanings; but the second row spans all four columns and contains something different. I really want this information to be part of the first line item (Shadrach), not part of the top-level table. But HTML doesn't seem to allow me to do this.
Is there a better, more semantic way?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
如果将表放在详细信息行的第一列中，使其跨越所有四列，并向表中添加描述性表标题，那么这应该提供一些基本语义来将详细信息表与其描述的列相关联。
我认为在这种情况下，传统的 HTML 语义无法传达您正在寻找的内容，您应该考虑使用 XHTML 并使用 ARIA 属性 由 W3C WAI 增强现有的 XHTML 语义来描述复杂的结构，例如您尝试创建的结构。也许如果您向单元格添加了 aria-scribedby 属性，则详细信息表描述，这将提供您正在寻找的附加语义：
您可能会发现许多有用的 aria-roles 和属性，例如 treegrid 具有分层布局和扩展行的表的角色。浏览一下 ARIA 工作草案，我相信您会找到一些可以描述您想要传达的内容的内容。
If you put the table in the first column of the detail row, make it span all four columns, and add descriptive table headers to the table, then that should provide some basic semantics to relate the detail table to the column that it describes.
I think this is a case though where the traditional HTML semantics fail to convey what you are looking for, and you should think about making use of XHTML and extending it with ARIA attributes laid out by the W3C WAI to augment existing XHTML semantics to describe complex structures like the one you are trying to create. Perhaps if you added an aria-describedby attribute to the cell the detail table describes, that would provide the additional semantics you are looking for:
There are a multitude of aria-roles and attributes you may find useful, for example, treegrid role for tables with hierarchical layouts and expanding rows. Take a look through the ARIA working draft and I'm sure you'll find something that can describe what you are trying to convey.
在尝试使标记更加语义化时，您需要问自己的一件事是您这样做的目的是什么。语义标记很有价值，因为它更容易设置样式，并且可以应用不同的样式表，而无需针对您正在使用的标记进行自定义。它具有价值，因为它有助于可访问性，使屏幕阅读器或替代渲染引擎更容易对其进行适当的分析。有时它很有价值，因为搜索引擎或其他自动化工具可以从中提取信息。
然而，有时您会遇到 HTML 无法处理的情况。这似乎就是其中之一。 HTML 没有任何方法可以在表中嵌套分层数据，其中的列与表中的其他列不匹配。所以，你需要利用你所拥有的做到最好。在这一点上，担心让它变得更加语义化并没有给你带来多大的好处。你正在做一些相当特殊的事情，其他样式表、屏幕阅读器和工具可能不知道该怎么做，所以几乎你想出的任何解决方案都不会完全违背元素的目的有问题就可以。
我认为您提到的解决方案是您能做的最好的解决方案。用一个类标记包含嵌套表的行，表明它们与其他行不同，并称其为良好。如果需要，您可以使用多个
元素将它们及其附加的行分组在一起：One thing you need to ask yourself when trying to make your markup more semantic is to what end you are doing it. Semantic markup has value because it's easier to style, and apply different stylesheets to without having to customize them for the markup you are using. It has value because it aids accessibility, making it easier for screenreaders or alternative rendering engines to analyze it appropriately. And sometimes it has value because search engine or other automated tools can extract information from it.
Sometimes, however, you come across a case that HTML just can't handle. This seems to be one of them. HTML does not have any way of nesting hierarchical data in tables with columns that don't match the other columns of the table. So, you need to do the best with what you've got. At this point, worrying about making it more semantic doesn't buy you all that much; you're doing something fairly special-case, that other stylesheets, screen readers, and tools probably won't know what to do with, so pretty much any solution you come up with that isn't completely contrary to the purpose of the elements in question is OK.
I think the solution you mention is about the best you can do. Mark those rows containing nested tables with a class that indicates that they aren't like the other rows, and call it good. If you wanted, you could group them together with the rows they are attached to using multiple
<tbody>elements:是的 - 不要在其中放置嵌套表格。手臂/腿应该是原始表格上的更多列，或者完全是一个单独的表格。然后使用 CSS 设置适当的样式1。
1不，我不知道如何使用语义 HTML 和 CSS 获得相同的视觉效果。但这不是重点。您正在寻找语义标记 - 而不是如何使其符合您认为适合用户体验的内容（提示：如果您使用表格进行布局（就像您一样），那么它只是适合视觉用户的用户体验）。
Yes - don't put a nested table in there. The Arms/Legs should either be more columns on the original table, or a separate table altogether. Then use CSS to style as appropriate1.
1No, I don't know how you could possibly get the same visual effect with semantic HTML and CSS. But that's not the point. You're looking for semantic markup - not how to make it fit with what you think is UX appropriate (hint: if you're using tables for layout (as you are) then it's only UX appropriate for visual users).
WAI 的表格教程 提供了处理复杂表格的非常简单的介绍。原始帖子中的示例可能说明了一种多级表。
The WAI's tables tutorial provides a very simple introduction to dealing with complex tables. The example from the original post might illustrate a kind of multi-level table.
除非您对信息有明确的语义，否则没有单一的方法可以做到这一点。您似乎在行内有一个树状结构，并且一些嵌套的 DIV 可能有用。因此，行单元格的 DIV 子代是可能的，尽管使用起来会很复杂。或者，您可以尝试创建嵌套表（TABLE 作为内容或单元格）。
如果您想保留复杂的语义，那么 HTML 并不是最好的方法，也许您应该使用 XML 表示或 RDF。这些都可以转换为 HTML 进行显示，同时保留语义。
Unless you have explicit semantics for your information there is no single way to do this. You appear to have a tree-like structure inside the rows and some nested DIV may be useful. So it may be possible to have a DIV child of a row cell, though it will be complex to work with. Alternatively you could try to create nested tables (TABLE as the contents or a cell).
If you want to preserve complex semantics then HTML is not the best way to do it and maybe you should either use an XML representation or RDF. These can both be transformed to HTML for display while preserving the semantics.