HTML 表语义结构 - 行上的替代数据答案

【问题标题】：HTML table semantic structure - alternative data on rowsHTML 表语义结构 - 行上的替代数据
【发布时间】：2018-11-03 13:38:06
【问题描述】：

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

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

| 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 黑客来强制一个新行，我需要将 HTML 布局，其中 Info 单元格在其自己的行中跨越所有列。这对我来说似乎不是很语义化。

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

【问题讨论】：

您想在点击时显示更多信息，但又不想做黑客？在这种情况下，您应该完善黑客的含义，否则任何答案都没有机会。我的意思是，例如您不想使用 JS 添加colspan 属性，这很明显。那么你想要做什么？
我想在没有技巧的情况下布局 HTML。用JS打开信息没问题
无论如何，恕我直言，我不明白为什么使用 colspan 会被视为非语义。这就是这些属性的用途，否则它们早就被弃用了。
结构的排版布局包含详细信息不是表格;它是一个项目列表，其中每个项目由一个单行表和一段补充信息组成。
@MrLister - colspan 很好。我需要通过使用 CSS 去除大量默认表格样式或使用 JS 插入更多 HTML 来强制将该数据放到新行中。两者都不理想

标签： html html-table css-tables semantic-markup

【解决方案1】：

您始终可以将table、tbody、tr 和td 设置为display: block，然后在 CSS 中布置所需的结构，使用 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>

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

【讨论】：

我想这确实是最有意义的。谢谢