在不使用表的情况下，语义地表示表格数据（字段标题然后是数据）

Question

我正在编写响应式＆amp;编码语义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' */
}

这使语义保持不变，但允许你在布局结束时完全自由。