是否使用表格作为容器？答案

【问题标题】：Use a table as container or not?是否使用表格作为容器？
【发布时间】：2010-05-13 07:51:51
【问题描述】：

我使用主表创建了我的整个网站，并将内容包含在表中。

有些人认为这是错误的，我想知道在我的情况下具体该怎么做。

在我的 index.html 上，我有一个 <table align="center">，然后是其中的所有内容。

现在内容是DIVS的形式，它们都有相对定位，所以它们是相对于表格的。

例如：

<table align="center">
  <tr>
    <td>
      <div style="position:relative; left:14px; top:50px;">

              CONTENT HERE... (Form, divs, images)

      </div>
    </td>
   </tr>
 </table>

我刚刚到了浏览器兼容的阶段。

无需进行任何更改，我的网站在 FF、SAFARI、Chrome 和 Opera 中都能完美运行。只有 IE 的麻烦。

所以对于我的 Q，如果你在我的位置上，你会改变我的布局并删除表格，而是使用更多的 css 和更多的 DIVS，还是你会使用我所拥有的？

如果你回答我，请不要只给我答案，还要给我一个“为什么”……换句话说，给我论据和事实……

谢谢

【问题讨论】：

哇，你不会认为你必须说这么多，但我在这里再说一遍...... 不要在表格中放置分区。
（相关） webstandards.org/learn/faq
因为一个表并不意味着被分割，而是整个。要么你想划分一些东西，要么你想把它放在一张桌子上；但是，您不能将同一张表中的所有内容分开。从概念上讲，如果你想把它分开，你有两张桌子，而不是一张。

标签： php javascript html css

【解决方案1】：

我没有在您的表格中看到任何比您仅拥有包含在单个表格单元格中的 DIV 所获得的东西更多的东西。您仍然根据您的 DIV 作为父级来安排内容，那么 div 之外的额外标记究竟对您有什么帮助？如果您担心 DIV 居中（显然您遇到了麻烦，因为您说您在 IE 中遇到问题），请在样式或 CSS 中设置 margin-right:auto; margin-left:auto。

【讨论】：

当然你没有，显然我的整个网站都不在那里给你看。
@Camran：不，这并不明显。您在一段包含一个句子的段落中说：“在我的 index.html 上，我有一个，然后是 all content 。” [强调我的。] 现在，要么单词意味着什么，要么它们没有。如果页面上的“所有内容”不在那个 DIV 中，那就不要说它在。

我同意，在我看来这个表在这个例子中完全没用。

【解决方案2】：

十多年的网络开发经验告诉我，在表格中构建网站是一种临时解决方法，它试图通过操纵内容来控制网站的布局。除非你别无选择，否则这是一条你不想走下去的眼泪轨迹。使用表格是个好主意的原因有很多，但这些原因几乎没有一个在今天仍然有效。

基本上，随着时间的推移，这种“设计策略”会使您的网站难以维护，并且会大大降低任何没有一双眼睛的人以有意义的方式访问您的数据的能力。请记住，我们不仅仅是在谈论“听”网络的盲人，我们还在谈论索引蜘蛛、机器人以及所有将网络的各个部分粘合在一起的幕后部分。

查看 CSS。只要有一点远见和一两个错误的开始，CSS 将使您的网站更易于维护，每个人（包括那些没有眼睛的人）都更易读，并允许您灵活地更改内容或更改布局，而不会冒很大风险搞砸了“其他”项目。

使用面向 CSS 的布局，您撕掉了表格标签，只打包了剩余的 div 标签。虽然可能需要一两天时间才能熟悉 CSS 盒模型，但这是在学习你永远不会迷失方向，而且随着时间的推移，它只会变得更有价值。

【讨论】：

SO 在我在 Google 上进行的大多数与编程相关的搜索的前三名结果中都占据显着位置，并且认识其他几个经历过同样情况的人。然而，SO 使用大量表格来控制布局和展示。
是的，但这并不意味着这是正确的做法。虽然设计网站的人使用网站，但他们不一定代表网站的所有用户或他们的意见。

【解决方案3】：

问题是“如果你是我，你会改变我的布局并移除表格吗？”我的回答是：“是”。

至于为什么，在 SO 上被问过好几次了。最受欢迎的主题是this one。

【讨论】：

【解决方案4】：

表格通常会给您带来很多麻烦，因为它们会阻止某些布局工作，因为许多 CSS 规则无法应用。除了在语义上不适合布局之外，表格需要更长的时间来呈现。

话虽如此，如果该网站实际上可以在所有这些浏览器中运行，并且可以使用条件 cmets 修复 IE 错误，那么您就可以知道它的局限性。

【讨论】：

【解决方案5】：

我肯定会去掉表格并将其替换为：模仿您的表格所做的主体样式/容器 div。

有很多原因： 1) 可访问性：使用屏幕阅读器的人对您的网站有不同的访问权限，从上到下、从左到右……他们需要在各处听到无意义且毫无意义的“表格、表格行、表格数据”。 2) 网络蜘蛛不喜欢表格 3) 在有 div 而不是表格的网站上维护更容易：在没有表格的情况下添加元素更容易。

不要害怕使用表格，而是将它们用于表格数据：只要所有元素都在语义上使用，并且使用了提高可访问性的可选元素，您的代码就应该经过验证并且易于所有人使用，并且供浏览器显示 - 并供您更改。

如果您不从表格进行更改，那么值得注意的是，td 的样式可以与 div 完全相同 - 无需在 td 中嵌套 div。这在语法上也是错误的，因为 td 是内联元素，而 div 是块级元素。你可以改变它，但为什么要麻烦呢？

【讨论】：

【解决方案6】：

嗯...删除表格可能不会是一项微不足道的任务，但我认为如果您想要使用此站点一段时间，并且使用屏幕阅读器的用户可以访问，或者有良好的SEO，您需要考虑使用语义标记和 css 对其进行重新编码：

一些不错的入门文章：

【讨论】：

【解决方案7】：

您真的不应该使用表格进行布局，因为这不是它们的设计目的。它会导致非常复杂和混乱的标记，难以维护，并可能导致严重的可访问性问题。

布局网站的正确方法不一定是限制自己只使用div 元素，而是使用语义上合适的任何元素。 div 元素本质上只是语义上的空容器，可以很好地用于一般布局目的，但对于事物列表，例如，您应该使用 ol 或 ul（取决于项目是否具有某种与它们相关的顺序）。至于表格，它们本身并没有什么问题，但它们应该只用于呈现表格数据，而不是用于布局！

CSS 的主要优点是它允许您将页面的视觉规范与结构规范（即标记本身）分开。

您可以更深入地了解这些内容here 和here。

【讨论】：

【解决方案8】：

Should you Use Tables for Layouts?

撇开Snark，这样想。复杂的网站可能需要分离页眉、页脚、侧边栏和导航，尤其是在一个项目中有多个开发人员的情况下。由于这些部分位于不同的文件中，几乎不可能弄清楚哪一行或哪一列在哪里。有了 div 就简单多了。

如果您意识到导航应该在顶部而不是侧面，该怎么办。如果您使用表格，您将不得不重组列。使用 divs 和 uls 您只需将 lis 向左浮动并增加 div 的宽度，也许添加一个明确的权利或两者兼而有之。 Sooooo 比用 td 弄清楚 tr 的位置和位置要简单得多。

它可以通过验证器（除了严格的 align 属性），但它只是不可维护、不可扩展或有用。

【讨论】：

【解决方案9】：

使用表格：

这并没有错。表格是迄今为止最古老的网站构建方法，因此您可以期待更多现代浏览器支持它。如果您正在构建具有固定宽度的网站，那么使用表格是一个真正的优势。通过使用表格，您的 CSS 会大大减少，这意味着跨浏览器问题会更少。如果你看看 GWT 是如何构建他们的小部件和面板的，它完全是通过使用表来构建的。！

我是 CSS 和 DIV 的忠实粉丝，但我想正确的做法可能不是 IE 存在时最好的做法。

【讨论】：

打卡是运行计算机程序的最古老的方式 - 我很高兴我们取得了进步:)
抱歉，没有。 HTML 用于在语义上构建内容。表格模块用于结构化表格数据。它不应该用于布局目的，无论结果在浏览器中看起来多么可靠。
在 CSS3 列和布局模块流行之前，应用一堆 CSS 来处理浏览器的怪癖是一种 hack。你可能不想这样称呼它，但它就是这样。在另一个有趣的地方，我们在这里使用的评论框也包含在<td> 中。整个问题以及关于 SO 的所有答案也是如此。
@Anurag，别人用了，不代表应该用。
@Anurag 所以滥用表格没有任何理由。要么你想编写符合标准的 HTML，要么你不想。没有讨论的余地。 W3C 规范明确说明了表格的用途。