语义：对于详细信息的“列表”，表格或列表是否更好答案

【问题标题】：Semantics: Is a table or a list better for a "list" of details语义：对于详细信息的“列表”，表格或列表是否更好
【发布时间】：2012-10-14 16:00:58
【问题描述】：

我在想，对于这样的列表：

（实际上不应该在它前面有一个点或任何其他列表样式，它只是为了使其更具可读性。）

使用列表是否更好（例如这样）：

<ul>
    <li>
        <h3>OS</h3>
        <p>iOS</p>
    </li>
</ul>

或者一张桌子：

<table>
    <tbody>
        <tr>
            <th>OS</th>
            <td>iOS</td>
        </tr>
    </tbody>
</table>

或者甚至是定义列表 (dl) 最准确？

我个人会选择一个列表，但我不确定如何在<li>-tags 中正确包装内容。

我读过一篇关于它的有趣文章"DEFINITION LISTS VERSUS TABLES"，但我仍然不确定。

【问题讨论】：

【解决方案1】：

从 HTML5 开始，dl 在语义上绝对是最合适的： http://html5doctor.com/the-dl-element/。

除非您打算以表格的方式列出数据/行的多个实例，否则表格根本没有意义。

出于响应式设计之类的原因，我通常更喜欢列表而不是表格，但根据经验，除非您处理的东西在概念上是矩阵的视图，而不是单个记录的详细信息或其他单个集合键/值属性很难证明一个表是正确的（无论如何在这种情况下dl 是完全匹配的）。

【讨论】：

【解决方案2】：

我会用桌子。您正在尝试组织键值对，我认为以表格格式比列表更容易传达。如果您不包含键名，即省略 OS、Version 和 Size，我将使用 list。

【讨论】：