使用 div 或表格来包含链接列更好吗？答案

【问题标题】：Is it better to use divs or tables to contain columns of links?使用 div 或表格来包含链接列更好吗？
【发布时间】：2009-07-10 04:17:19
【问题描述】：

我有一个页面底部有 3 列链接。每一列都放入一个 div 中，所有三个 div 都包装在一个以页面为中心的大 div 中。这是更适合表格的东西，还是表格不适合这项工作？

【问题讨论】：

标签： javascript html css css-tables

【解决方案1】：

您也可以为此使用<ul> 和<li>。

#horizontal {
    width: 100%;
    background: #eee;
    float: left;
}

#horizontal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 12em;
    float: left;
}

这将使用 li 元素创建水平列，然后您可以填充 HTML 以在每个 li 中创建单独的链接。

【讨论】：

+1 表示语义。 OP 描述的是一个 list 链接。它应该是一个 list 元素。 :-)
如果每个列表都有自己的标题，您可以改用<dl>，每个链接都使用<dt>和标题和<dd>。

【解决方案2】：

经验法则是：

使用 Div 进行布局，表格用于表格数据。

在旁注中，请查看“经验法则”一词的词源，非常幽默。

【讨论】：

我一直遇到以下问题：我遵循经验法则，所以我使用 DIV。然后我在某些时候得到了一些干扰样式，这迫使我尝试使用 TABLE... 它就可以工作。
每当谈到风格，应该有一些方法/黑客来完成。如果它真的不能工作，我会尝试 JS 来帮助造型。无论如何，我不会为了纯粹的显示决策而牺牲正确的格式。
“经验法则”不是来自殴打妻子，如果这就是你的意思：p

【解决方案3】：

您想问自己的问题是，您的链接是任何表格数据的一部分吗？

如果是，表是您的选择。如果没有，那么你应该使用 div。

使用语义正确的元素来创建页面很重要，尽管其他元素可能会产生相同的效果，而且可能更省力。

至于您的链接，它们似乎不是表格的一部分。我建议使用 div 和适当的 css。

jrh

【讨论】：

【解决方案4】：

我不认为桌子是一个好的选择。在我的书中，仅仅拥有三列并不构成表格数据。使用一些干净的标记和良好的样式表，您可以采用更灵活的方式来完成此任务。如果您使用左浮动 div，只需给它们一个百分比宽度，以便它们填满父容器（100 / 元素数）％。这样，如果您想添加另一列，只需更改一个简单的标记即可更改单个样式表。这样您就不必处理浏览器表格的不稳定问题，并且在其设计中拥有更大的灵活性 - 最重要的是，您可以在不离开样式表的情况下完全更改布局。

【讨论】：

我建议您将百分比计算修改为类似于 (floor(100/number-of-elements))% 的内容，以解决浏览器的宽度与像素百分比问题。我不记得这在一个浏览器或另一个浏览器中是否特别糟糕，但如果宽度恰好等于 100%，它偶尔会导致问题，特别是如果还添加了边框。

【解决方案5】：

HTML 背后的主要原则是“标记”数据的含义。

我将以上述原则为指导：

如果您有 3 列只是因为它看起来不错 - 那么您的列没有意义，您应该尝试使用 DIV（它们是无意义的“容器”元素）。
如果您有 3 列，因为有 3 类链接，那么 TABLE 就可以了。想象一下，如果您为每个链接列表提供标题 - 这会使 TABLE 带有 THEAD 必要。
事实上，每一列都是一个“无序列表”——它转化为一个带有 LI 元素的 UL 元素。
既然你有一个链接列表，你当然会使用 A 元素。

所以从第一原则来看，你应该有这样的结构：

<DIV> or <TABLE> (with <TR>/<TD>)
 -> <UL>
 ----> <LI>
 -------- <A>

【讨论】：

【解决方案6】：

与其他答案相反，表格可能是一种语义解决方案。如果这三个部分彼此不同并且有标题，您可以使用<th> 作为标题，使用<td> 作为每个链接。我认为这完全符合语义。

【讨论】：