标准 Xhtml- div vs li

Question

在以下情况下，我需要您的建议。 假设我有一个类似的用户界面

Col1 Col2
A    D
B    E
C    F

现在要在我的 HTML 中得到这个，我正在使用 ..like

<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 或使用较旧的移动浏览器（不能很好地支持浮动）查看它，它看起来会不太好。

Answer 2

您也许可以使用definition list，虽然这更适合键/值对数据，但我无法判断您的情况可能是这种情况。

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

Answer 3

我会支持 Manticore 的声明。表格也应该用于表格数据（以行和列显示的数据）。每个人都在使用 div 代替表格进行布局，但这并不意味着应该放弃表格。您正在做的不是布局；它正在构建特定的内容片段，因此您应该使用表格标签。另外，还有一些优势：

• 您可以使用包含标签的 s 来创建表头。如果用户打印表格并且超出一页，则表格中的内容将打印在每个新页面的顶部。标签也是如此。一个细微的区别：里面的内容应该是单元格 1 的内容格式 - 除了 .
• Divs 实际上不可能以表格格式布局。它们对于页面设计布局很有用，但不一定适用于表格数据。此外，如果您要创建一个交互式页面，用户将在其中添加更多数据，您会发现自己很难弄清楚 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。 “最差”是因为它们没有语义。基本上是标签汤。