什么是语义正确的 - <table> 或 <ul>？答案

【问题标题】：What's semantically correct here - a <table> or a <ul>?什么是语义正确的 - <table> 或 <ul>？
【发布时间】：2014-04-08 16:51:14
【问题描述】：

假设您有这样的概述：

对我来说，这既是一个表格也是几个嵌套列表。

在 HTML 中实现这一点的语义正确方法是什么？

【问题讨论】：

dl + dt + dd 用于列表。嵌套列表在这里做得很好
列表列表。这实际上是可能的。
考虑如何导航和渲染它会更有用。在讨论 HTML 时，“语义”只是玩文字游戏。 table 和 ul 元素没有任何真正的含义（这是真正的语义）；它们只是数据结构。
投票结束这个问题的人，请评论一下为什么？
这完全是主观的，因为没有办法量化其中的任何一个。我喜欢语义学，我以前也参与过这些，但没有赢家。我没有投票关闭，匿名巨魔在这里横行

标签： html html-lists html-table semantic-markup

【解决方案1】：

与Mike 不同，我不认为我们在这里处理表格数据。您已经嵌套了列表个出版物。遵循一些关于作者和出版日期的准则（Google、html5 Doctor、...）；您正在处理的有关出版物的额外数据更有可能是您的内容的“标签”，可以以多种方式设置样式，从而拒绝表格数据假设。我根据<li> 选择了以下方法：

<span class="title">What Should I use, li or table?</span>        
<time datetime="2014-04-08T15:27Z">2d ago</time>
<address><a rel="author" href="#">John Jackson</a></address>

我以非表格方式在 JSFiddle、styled it 和 styled it 中复制了您的嵌套列表。您会注意到 HTML 片段在我制作的三种样式中的任何一种中都没有改变。能够像以前的 Fiddles 那样设置样式，说明 HTML 如何在语义上适当。

语义往往会引出不同的有效方法，我的一些用法可能并不完美，但主要思想应该是合适的。让我知道这是否正确回答了您的问题！ :-)

【讨论】：

谢谢！我得出的结论与上面的一条评论相同，也就是说，它可能完全是主观的，两种方法都有效。但是你的例子真的很好，很有帮助，所以我接受你的回答。
只有一个后续问题：在您的JSFiddle example 中，引入和设置标题（“帖子”、“用户”、“日期”）并使它们与实际数据与表格中的数据一样吗？
哈！这听起来更像是 table 标记的工作。如果您确实需要标题来表示不太明显的数据，那么您的数据可能更适合作为由th 标题管理的table。研究语义是为了让内容自己表达它的目的；在您的示例中，我很确定标题不会为数据的解释增加任何价值。我在 pure HTML 中提出了和的两种样式，您的内容的目的很明确。如果您需要标题，则应使用表格。希望这会有所帮助！

【解决方案2】：

我认为其他一些人被子弹击飞了。这包含表格数据，因此适合使用表格。可以在表格单元格中轻松创建类似列表的样式。

然而，在我看来，数据的表示完全是一个表格，而类似列表的结构只是为了显示消息的结构（即通过缩进回复）。

【讨论】：

这不是表格数据，嵌套是使它完美的列表的重要因素。关于它的唯一表格是名称和日期，但这只是标记每个列表元素。主要结构是线程和响应的嵌套。子弹与它无关。

【解决方案3】：

这是一个嵌套列表。第一个是最外面的，下面有三个项目，其中一些有自己的列表。

基本上它可能看起来像这样：

<ul>
  <li>What Should I use
    <ul>
      <li>Re: What Should I use </li>
      <li>I think the best option is . . .
        <ul> . . . </ul>
      </li>
    </ul>
  </li>
</ul>

要排列名称和日期信息，您可能可以使用 float: right span 元素，并防止 li 包装您可能需要适当地设置溢出，但我认为这只是一个问题格式化。

【讨论】：

关于作者的信息以及帖子的创建时间如何？这不是 - 连同帖子标题 - 表格信息吗？
不，这是格式问题。信息不是表格的，只是您希望它以某种方式排列。可能会向右浮动。