在不使用表的情况下，从语义上表示表格数据(字段标题，然后是数据)

Question

我正在编写一个响应&语义HTML5网页。然而，我遇到了一个障碍：

有一段设计通常会在HTML中重新表示为表格数据（即标题和相应的数据），但由于视觉设计/布局要求，在这种情况下不可能使用表格。

有没有一种HTML替代品可以使用表格，从语义上讲，通过辅助技术（如屏幕阅读器）很好地表示表格？

目前我正在运行：

<p> <strong>Heading 1</strong>: <span>Data 1</span> </p> <p> <strong>Heading 2</strong>: <span>Data 2</span> </p>

不是最好的解决方案，但它确实允许我满足视觉设计要求。

非常感谢。

Answer 1

在HTML5中，语义和表示之间有严格的分离。大多数"默认"表示效果只是浏览器默认样式表中的规则。

如果您的数据在语义上是一个表，请使用table元素。如果的默认表渲染真的不适合（考虑到您可以使用例如table-layout规则实现的功能，我实际上会感到惊讶），请随意覆盖它：

table.customtable, table.customtable tr {
  display:block;           /* overrides the defaults of 'table' and 'table-row' */
}
table.customtable td {
  display:inline-block;    /* overrides the default value of 'table-cell' */
}

这使语义保持不变，但允许您在布局端享有完全的自由。