代码之家 › 专栏 › 技术社区 › Bennett McElwee

复杂或嵌套HTML表的语义标记?

tabular semantic-markup html

Bennett McElwee · 技术社区 · 16 年前

我想知道当数据行包含不能放在单个表行中的复杂数据时,在网页上标记表格数据的最佳方法。

下面是一个具体的例子。第一行附有关于胳膊和腿的额外信息列表。

Shadrach  M  Banana     12
  Arms  Blue    2
  Legs  Yellow  3
Meshgah   M  Apple      34
Abednego  M  Persimmon   0

除了使用包含像这样的嵌套表的跨区单元格之外,还有没有更好的方法来标记这个?

+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+
| +-------+------+-+      |
| |       |      | |      |
| +-------+------+-+      |
| |       |      | |      |
| +-------+------+-+      |
+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+

我对此并不完全满意,因为外部表有四列,具有特定的标题和含义;但是第二行跨越了所有四列,并且包含一些不同的内容。我真的希望这些信息是第一行项目(shadrach)的一部分,而不是顶级表的一部分。但HTML似乎不允许我这样做。

有没有更好、更语义化的方法?

5 回复 | 直到 9 年前

Brian Campbell Dennis Williamson 16 年前

当你试图让你的标记更加语义化时,你需要问自己的一件事是你要做的到底是什么。语义标记很有价值,因为它更容易设置样式,并且不必为所使用的标记自定义样式表就可以将不同的样式表应用于。它有价值,因为它有助于访问,使屏幕阅读器或其他渲染引擎更容易对其进行适当的分析。有时它也有价值,因为搜索引擎或其他自动化工具可以从中提取信息。

但是,有时会遇到HTML无法处理的情况。这似乎就是其中之一。HTML没有任何方法可以将层次结构数据嵌套在具有与表中其他列不匹配的列的表中。所以,你需要尽你所能。在这一点上,担心让它更语义化并不能给你带来很多好处;你做了一些非常特殊的事情,其他样式表、屏幕阅读器和工具可能不知道该怎么做,所以你提出的几乎所有解决方案都没有完全违背所讨论元素的目的是可以的。

我认为你提到的解决办法是尽你所能。用一个类标记那些包含嵌套表的行,该类指示它们与其他行不同,并称之为good。如果需要,可以使用多个 <tbody> 元素:

<table>
<tbody>
  <tr><td>Shadrach  <td>M  <td>Banana     <td>12
  <tr class=nested><td colspan=4>
    <table>...</table>
<tbody>
  <tr><td>Meshgah   <td>M  <td>Apple      <td>34
<tbody>
  <tr><td>Abednego  <td>M  <td>Persimmon   <td>0
</table>

Ryan Lynch 16 年前

如果将表放在详细信息行的第一列中,使其跨越所有四列,并向表中添加描述性表标题,那么应该提供一些基本语义,将详细信息表与它描述的列关联起来。

我认为这是一个传统的HTML语义无法传达您所寻找的东西的情况,您应该考虑使用XHTML并用 ARIA attributes 布置的 W3C WAI 为了增强现有的XHTML语义来描述复杂的结构,比如您试图创建的结构。如果您添加了 aria-describedby 详细信息表描述的单元格的属性,它将提供您正在寻找的附加语义:

<table>
     <thead>
        <tr>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
          <th>column 4</th>
        </tr>
     </thead>
     <tbody>
        <tr>
          <td id="master" aria-describedby="detail">Shadrach</td>  
          <td>M</td>  
          <td>Banana</td>     
          <td>12</td>
        </tr>
        <tr>
          <td colspan="4">
             <table id="detail">
                <tbody>
                   <tr>
                      <td>arms</td>
                      <td>blue</td>
                      <td>2</td>
                   </tr> 
                   <tr>
                      <td>legs</td>
                      <td>yellow</td>
                      <td>3</td>
                   </tr>
                </tbody>
             </table>
          </td>
        </tr>
     </tbody
 </table>

您可能会发现许多aria角色和属性是有用的,例如, treegrid 具有层次布局和展开行的表的角色。看一下咏叹调的工作稿,我相信你会找到一些能描述你想要表达的东西。

Mark Brackett 16 年前

有没有更好、更语义化的方法?

是-不要在其中放置嵌套表。胳膊/腿应该是原始桌子上更多的柱子,或者是一张单独的桌子。然后根据需要使用CSS设置样式 ^一 .

^一不,我不知道怎样才能用语义HTML和CSS获得相同的视觉效果。但这不是重点。您需要的是语义标记,而不是如何使其与您认为的UX适当的内容相匹配(提示:如果您使用表进行布局(如您所用),那么它只是适用于可视用户的UX)。

2C-B 11 年前

这个 WAI's tables tutorial 提供处理复杂表的非常简单的介绍。原始帖子中的示例可能会说明 multi-level table .

peter.murray.rust 16 年前

除非您对您的信息有明确的语义,否则没有一种方法可以做到这一点。您似乎在行中有一个类似树的结构,一些嵌套的DIV可能很有用。所以可能有一个行单元格的DIV子级,尽管使用起来很复杂。或者,您可以尝试创建嵌套表(表作为内容或单元格)。

如果您想保留复杂的语义,那么HTML不是实现这一点的最佳方法,也许您应该使用XML表示或RDF。它们都可以转换为HTML来显示,同时保留语义。