HTML table 语义结构 - 行上的替代数据

Question

这更像是一个语义问题，我知道我可以做到，但是我应该吗？

我有大量数据需要在页面上显示。它被布置为表格数据，如下所示：

| Reference | Name | Date | Status | Type |

这是实际应该使用 HTML 表的唯一用例之一……

每一行都可以点击，然后它将展开以在下一行中显示有关该预订的更多信息。打开所有行后，结构将如下所示：

| Reference | Name | Date | Status | Type |
| Info |
| Reference | Name | Date | Status | Type |
| Info |
| Reference | Name | Date | Status | Type |
| Info |

如果不使用一些 CSS 或 JS hackery 来强制新行，我需要将 HTML 布局为在其自己的行中跨越所有列的信息单元格。这对我来说似乎不太语义化。

现在我想知道这是否合适，或者我是否应该一起跳过使用表格，或者有没有人有更好的主意？

Answer 1

您可以随时将 table、tbody、tr 和 td 设置为 display: block，然后在 [=28= 中布置所需的结构]，使用 HTML 标签作为纯结构标记：

<html>

  <title>Testing table layout</title>

  <style>

    table, tbody, tr, td {
      display: block;
    }
    table {
      width: 610px;
    }
    tbody, tr {
      clear: both;
      width: 100%;
    }
    td {
      float: left;
      width: 33%;
    }
    td.extra {
      clear: left;
      width: 100%;
    }
    /* Colors to make cells visible */
    td { background: #FFEEEE; }
    td+td { background: #EEFFEE; }
    td+td+td { background: #EEFFFF; }
    td+td+td+td { background: #EEDDFF; }

  </style>

  <body>

    <table>

      <tr valign="baseline">

        <td>Left cell</td>

        <td>Middle cell</td>

        <td>Right cell</td>

        <td class="extra">Supplementary cell</td>

      </tr>

      <tr valign="baseline">

        <td>Left cell</td>

        <td>Middle cell</td>

        <td>Right cell</td>

        <td class="extra">Supplementary cell</td>

      </tr>

      <tr valign="baseline">

        <td>Left cell</td>

        <td>Middle cell</td>

        <td>Right cell</td>

        <td class="extra">Supplementary cell</td>

      </tr>

    </table>

  </body>

</html>

在现实生活中，您当然会将此限制为特定的 class 个表。最后一个单元格中的补充数据当然最初是 display: none，只有在需要时才会得到 display: block。

HTML table 语义结构 - 行上的替代数据

HTML table semantic structure - alternative data on rows

html

html-table

css-tables

semantic-markup