2 列 table 或语义正确的定义列表 HTML？

Question

我经常需要显示一系列名称-值对，我相信大多数 Web 开发人员都会遇到这种情况。通常以属性的形式出现。执行此操作的语义正确 HTML 方法是什么？

<table>
  <tbody>
    <tr>
      <td>Name</td><td>Jimmy</td>
      <td>Age</td><td>33</td>
      <td>Gender</td><td>Male</td>
    </tr>
  </tbody>
</table>

或

<dl>
  <dt>Name</dt><dd>Jimmy</dd>
  <dt>Age</dt><dd>33</dd>
  <dt>Gender</dt><dd>Male</dd>
</dl>

或者还有其他更好的方法吗？

Answer 1

我认为 table 在语义上是正确的。

基于 w3c，我们可以知道 table 元素 'allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.'

但是，dl 元素“consist of two parts: a term and a description”，这不是你的情况。

similar question

Answer 2

在 HTML5 中，您的用例最具体的元素是 dl element（粗体强调我的）：

The dl element represents an association list consisting of zero or more name-value groups (a description list).

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

2 列 table 或语义正确的定义列表 HTML？

2 column table or definition list for semantically correct HTML?

html

html-table

semantic-markup