Question

在以下场景中我需要你的建议。可以说我有一个类似

的用户界面

Col1 Col2
A    D
B    E
C    F

现在我在HTML中使用..似乎

<div class="col1">
  <div>A</div> 
  <div>B</div>
  ..........
</div>
<div class="col2">
  <div>D</div> 
  <div>E</div>
  ..........
</div>

但是在这里我使用了太多的div ..根据标准的XHTML它是否可以，或者我应该使用<li>？

有人可以提出适当的解释，或者其他什么吗？注意：不使用表 感谢。

Answer 1

在我看来，您正在尝试显示table元素非常有用并且是预期用途的表格数据。

<table>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

如果您真的不想使用table，我会像您在示例中一样使用div元素。但最终你会意识到你想要完成的是模拟已经存在的元素 - table。

您应该记住，当您使用div作为表格时，当您禁用CSS或使用较旧的移动浏览器（不支持浮动）来查看它时，它看起来不会很好。 / p>

Answer 2

您可以使用definition list，虽然这更适合键/值对数据，但在您的情况下可能就是这种情况，我无法分辨。

如果不是，就像Manticore所说，只需使用表格：http://giveupandusetables.com/

Answer 3

我会发表Manticore的声明。表格也应该用于表格数据（用行和列显示的数据）。每个人都高高兴兴地使用div来布局而不是表格，但这并不意味着应该放弃表格。你在做什么不是布局;它正在构建特定的内容片段，因此您应该使用表标记。另外，还有一些优点：

您可以在包含标签的s周围创建表头。如果用户打印表格并且它超出一页，则将在每个新页面的顶部打印该内容。标签也是如此。虽然有一点不同：内容内容应采用单元格1的内容格式 - 不要使用s中的标记，除了那些内容。
几乎不可能以表格格式布局。它们对页面设计布局很有用，但不一定适用于表格数据。另外，如果您正在创建一个用户将添加更多数据的交互式页面，您会发现自己很难确定div的位置。

Answer 4

'语义标准'绝对是使用表格。正如其他人所说，这是您的基本表格数据。这就是他们的目的，故事结束。

但是，如果你不能使用表，那么我会说下一个语义最有意义的结构将是一个列表，因为它允许你定义元素之间的关系，如下所示：

<ul>
<li>Col1
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    </ul></li>
<li>Col2
   <ul>
   <li>D</li>
   <li>E</li>
   <li>F</li>
   </ul></li>
</ul>

然后，最糟糕的是div。 '最糟糕'因为它们没有语义含义。标签汤，基本上。

标准Xhtml- div vs li

4 个答案: