为什么使用表格来构建您的布局？

Question

为什么使用表格来构建您的布局？

htmlcsshtml-table

27

查看Stack Overflow的源代码后，我注意到他们经常使用表格和内联CSS，同时我发现他们使用内联表格属性格式化有些奇怪。

<table width="100%">

我只是好奇他们为什么要使用表格来构建模板，而不是流行（或曾经流行）的DIV。

此外...使用CSS包含和在同一页上使用内联CSS的目的（我知道可能有很好的答案/解决方案...我只是想知道它们是什么）

我理解在表格中使用表格数据没有问题...但在这种情况下，Stack Overflow的表格用于结构。

- dezwald

这里有一个想法：为什么不自己做呢？这里有足够多的人争论说它可以完成（包括我自己），那么为什么不创建一个新的问题（当然是社区维基），让用户有机会来解决它呢？ - Mike B

这也非常正确！我想我可能会试一试....但我知道，无论我做什么......我都会被某些 CSS / div 忍者咬掉。 - dezwald

14个回答

22

我没有参与SO的开发，以下是我的一般性看法：

我发现，表格通常比基于CSS的布局更易于使用，并且在浏览器中表现更加一致。

此外，为了完成任务而随意添加CSS样式是常见的做法。不过，这些可以稍后重构。

至于为什么他们选择在HTML中设置表格的宽度而不是在CSS中，我无从得知。

我知道SO在刚开始时使用了一个真正的设计师。但我不知道那个设计师是给他们提供了网站应该长什么样子的图片还是实际的标记。

请不要因此责备我。我们并非都是CSS大师。

- Michael Haren

1

为什么要在表格上使用width属性，而不是一个带有width：100％的CSS类？ - cletus

因为，可悲的是，它们做的事情不同。 - Sparr

打电话并将其留作他们播客的问题。 - EBGreen

是的，在所有浏览器上，特别是非视觉浏览器中，表格布局可能看起来像*(&^...使用语义标记！ - Steve Perks

最近对源代码的检查显示，SO实际上在许多地方使用DIV而不是表格 - 这可能是自此问题被提出以来的新情况。 - Michael Haren

显示剩余4条评论

18

SO可能是由程序员编写的，而不是Web开发人员。

- Jough

2

小心点，这可是挑衅之言。 ;) - Lieutenant Frost

1

我对Web开发人员没有任何偏见。编程和Web开发都有它们的位置，但它们是完全不同的世界。这就像说Web开发人员不应该成为设计师。也许SO只是没有雇用设计师？ - Jough

我也应该说，我对程序员也没有任何成见，因为我自己也是程序员 ;) - Jough

9

表格并不是邪恶的，但某些使用它们的方式（以前随处可见）是邪恶的。即使用间隔符、嵌套单元格等来控制边距和填充。

尽管现在每个人都谈论使用CSS和DIV进行布局，但事实是，当涉及到布局时，CSS非常糟糕。你只能做这么多。看看使用CSS获取2或3列布局的一些建议性解决方案，它们都很差。扔一个<table><tr><td id="left-column"><td id="right-column"></tr></table>要容易得多。

CSS对于非平凡的布局（也就是纯粹的div /css）不太适合。

我刚才提出的表格解决方案需要使用CSS来控制宽度、填充、边框、背景图像等。

- hasen j

垃圾。使用CSS比使用表格更加强大。 - Mike B

SO并不是一个复杂的布局。说这个网站需要表格来抵消CSS的缺点是很弱的。 - Steve Perks

超过两列的内容如果没有表格会变得很复杂。 - hasen

@hasen：当适当使用时，浮点数并不是邪恶的：它们非常适合用于在文章侧面浮动数字。然而，滥用它们来进行表格布局则是相当邪恶的。（就像以前使用间隔图像、嵌套表格等方式一样，这些都是在 CSS 出现之前的事情了。） - SamB

1

@SamB，同意，这就是我最初的意思，使用浮点数进行布局是不好的。 - hasen

显示剩余9条评论

8

Give up and use tables

- Marius

1

这是打错字了吧？应该不是应该写成“放弃了…”吗？ - Steve Perks

4

由于Internet Explorer不支持display:table CSS属性，这正是提供类似网格布局模型的方式（相当于如何呈现html表格）。网格模型是建模许多布局最简单、最灵活的方式。

所以你有三个选择，但都不太理想：

- 放弃支持Internet Explorer（所有其他现代浏览器都支持display:table属性，它已经成为CSS2标准的一部分超过十年）； - 使用笨重的CSS解决方案，这些方案费用高昂且难以维护； - 放弃语义纯度并使用TABLE元素。

SO选择了最后一个选项，可能是因为他们认为支持Internet Explorer用户比支持残障用户更重要，并且他们想要一个开发快速、简单易维护的东西。

- olavk

那么你声称SO布局不能在纯粹、有效的CSS中重新制作，而不使用表格进行结构？听起来像是一个挑战。 - Mike B

2

不，我认为一个纯CSS的解决方案（没有display:table）会更加复杂和难以维护。请看列表中的第二个点 :-) - JacquesB

对于呈现表格数据，HTML表格绝对没有任何问题。如果你知道你在做什么，你可以使用CSS布局就像使用HTML表格一样快速地构建SO，并且能够在所有主要浏览器上工作，而且可能具有更小的占用空间（而且不需要display:table或其解决方法）。 - CJM

IE6支持display:inline-block，这可以轻松地替换掉一半的表格而不需要笨拙的解决方法。 - user42092

真巧啊！我刚给一个坚持使用CSS的客户打了一封几乎完全相同的电子邮件。 - HRJ

2

Jeff和他的团队正在快速而粗糙地完成它。这是一个非常快速的开发周期，没有时间去清理大部分杂乱的内容。

面对现实吧 - 除非您是专家，否则CSS对于表格结构来说是耗时的。

内联样式和包含的CSS只是他们试图快速完成它的标志，至少在第一次迭代中不用担心“正确”的做法。正确的方法就是任何能让它快速完成的方法。

- Carlton Jenke

2

如果你不知道该怎么做，CSS会耗费很多时间。但是如果你知道该怎么做，它就像快速操作一样迅速，因为你通常会输入更少的内容并花费更少的时间进行维护。快速而粗糙的开发（因为你没有正确的技能）没关系，只是不要把它归咎于CSS。 - CJM

2

IE8将是最后一个为CSS display: table-*值添加支持的主要浏览器，因此这种区别将消失。希望这将结束有关CSS难度的抱怨，人们可以停止使用呈现方式来污染标记。

- brianary

1

除非还需要5年时间才能完全淘汰IE6，以及另外10年才能淘汰IE7，所以或许在2019年这个情况才会应用。:-) - JoshBerke

我认为你会发现IE的更新速度非常快，因为它们会自动推送升级。目前微软正在推出一种实用程序来阻止公司环境中的IE8。 - brianary

现在是2010年的末尾了。我仍然从一个致力于HTML5和SVG实验的网站上获得25％的IE6流量！ - HRJ

我觉得很难相信，因为我工作的金融机构中有大约3%的用户使用IE6。 - brianary

2

我觉得自己还算比较聪明，至少不会太低于平均水平，但是我觉得CSS布局完全不直观。表格非常直观易懂。我认为衡量一项技术好坏的一个标准就是你在阅读时需要多少次参考手册。与CSS相比，表格在这方面完胜CSS。每每使用CSS时，我都不得不深入挖掘才能弄清楚如何做类似这样的事情。

- morgancodes

1

表格和布局

SO的布局不是基于表格的。

快速浏览一下，我会说SO的布局80%是基于div的，20%是基于表格的。表格用在标题和“徽章”框上。在我的看法中，表格用于徽章是合适的（毕竟它是一个项目列表），但对于标题来说就不太好了。
除此之外，其他地方都使用div。

内联CSS

同样，许多内联定义被使用（可能是为了快速模拟网站的结构），但SO正确地使用了CSS（来为div提供样式和打印格式）。

- friol

咳咳。如果是一个项目列表，使用列表元素比表格更合适。但我又算什么呢？ - Adriano Varoli Piazza

我认为在这种情况下，每行只有一个<td>标签的表格也是可以接受的。无论如何，我们在这里并不面临“div vs. table”的两难选择。 - friol

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nezroy · Accepted Answer

表格与Div的争论是毫无意义的。

使用表格进行布局可能会引起特定问题。其中之一便是在单个表格内构建整个网站布局，以处理页边距和位置等，由于表格的呈现方式，这通常意味着网站只能在浏览器引擎接收到所有内容后才能进行渐进式呈现，用户可能需要等待很长时间的空白页面，这是一个“坏事”。还有一些在mozilla/ie5时期存在的表格渲染不一致性问题，使得跨浏览器表格布局的一致性相当麻烦，尤其是在单元格中使用图像时。

纯div支持者喜欢谈论内容与表现，因为从理论上讲，HTML 4.01是纯内容，全部有意义。 div在抽象意义上提供了有意义的组织结构，然后通过CSS专门提供表现。在这些争论中，表格仅在用于包含实际表格数据时才有效。当然，这忽略了对于任何足够复杂的布局，几乎总会有很多空的div漂浮在周围，仅仅是为了支持必要的表现CSS挂钩，打破了这种抽象的第一层。一旦打破了这种抽象，就没有法律规定，在您的布局只需要在HTML中使用一个没有意义内容的表现挂钩时，div比表格更合适。如果你只能选择一个无意义的div或表格来使你的布局正常工作，那么选择哪个更容易。

最终，它关乎于了解所有方法的限制并使用最合适的方法。有许多情况下，使用表格比设置毫无意义的div数组更简单，并且表格呈现问题并不适用。如果表格很小并且表示内部内容的一个小块，则呈现延迟并不重要。