復雜或嵌套HTML表的語義標記？

Question

當數據行包含無法放入單個表行的復雜數據時，我想知道在網頁上標記表格數據的最佳方法。

這是一個具體的例子。 第一行有一個關於手臂和腿的附加信息清單。

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

除了使用包含這樣的嵌套表的跨區單元格之外，還有一種很好的方法來標記它嗎？

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

我對此並不滿意，因為外表有四列，具有特定的標題和含義; 但第二行跨越所有四列並包含不同的東西。 我真的希望這些信息成為第一個項目（Shadrach）的一部分，而不是頂級表的一部分。 但HTML似乎不允許我這樣做。

有更好的，更語義的方式嗎？

Answer 1

如果將表放在詳細信息行的第一列中，使其跨越所有四列，並將描述性表頭添加到表中，那么應提供一些基本語義，以將詳細信息表與其描述的列相關聯。

我認為這是一個案例，雖然傳統的HTML語義無法傳達您正在尋找的內容，您應該考慮使用XHTML並使用W3C WAI布局的ARIA屬性擴展它以擴充現有的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>

您可能會發現許多有用的詠嘆調角色和屬性，例如，具有分層布局和擴展行的表的treegrid角色。 看看ARIA的工作草案，我相信你會找到一些可以描述你想要傳達的東西的東西。

Answer 2

在嘗試使標記更具語義性時，您需要問自己的一件事是您正在做什么。 語義標記具有價值，因為它更容易設置樣式，並應用不同的樣式表，而無需為您正在使用的標記自定義它們。 它具有價值，因為它有助於訪問，使屏幕閱讀器或替代渲染引擎更容易適當地分析它。 有時候它有價值，因為搜索引擎或其他自動化工具可以從中提取信息。

但是，有時您會遇到HTML無法處理的情況。 這似乎是其中之一。 HTML沒有任何方法可以在具有與表的其他列不匹配的列的表中嵌套分層數據。 所以，你需要用你所擁有的東西做到最好。 在這一點上，擔心使它更具語義並不能給你帶來太大的收獲; 你正在做一些相當特殊的事情，其他樣式表，屏幕閱讀器和工具可能都不知道該怎么做，所以你想出的任何解決方案都不完全違背元素的用途問題還可以。

我認為你提到的解決方案是關於你能做的最好的。 將包含嵌套表的行標記為一個類，該類指示它們與其他行不同，並將其稱為好。 如果您願意，可以使用多個<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>

Answer 3

有更好的，更語義的方式嗎？

是的 - 不要在那里放置嵌套表。 Arms / Legs應該是原始表格上的更多列，或者是一個單獨的表格。 然后根據需要使用CSS進行樣式¹ 。

¹不，我不知道你怎么可能用語義HTML和CSS獲得相同的視覺效果。 但那不是重點。 您正在尋找語義標記 - 而不是如何使其與您認為適合的UI相適應（提示：如果您使用表格進行布局（就像您一樣）那么它只適用於視覺用戶的UX）。

Answer 4

WAI的表格教程提供了處理復雜表格的簡單介紹。 原始帖子中的示例可能會說明一種多級表 。

Answer 5

除非您的信息具有明確的語義，否則沒有單一的方法可以做到這一點。 您似乎在行內部具有樹狀結構，並且某些嵌套DIV可能很有用。 因此，有可能有一個行單元格的DIV子項，盡管使用起來很復雜。 或者，您可以嘗試創建嵌套表（TABLE作為內容或單元格）。

如果你想保留復雜的語義，那么HTML不是最好的方法，也許你應該使用XML表示或RDF。 這些都可以轉換為HTML進行顯示，同時保留語義。