为什么在网站布局中使用表格如此邪恶?

其他几点:

• 别那么狂热。CSS并不完美,而且有一些事情可以用表做得更容易。所以如果你需要的话,在里面放一张小桌子。它不会杀了你。

• 基于表的布局的主要“坏处”是一种深度嵌套的混乱,它曾经是获得对页面精确控制的唯一方法。您将在表内的表中放置表,并在策略上放置透明图像以控制间距。我认为现在这种情况很少见,CSS可以让你清除90%的混乱。

• “语义网”是一个很好的目标,它的标签是给页面赋予意义,而不是描述布局。然而,当前的HTML版本并没有太大的进展。因此,页面中总是有大量的标签,这些标签只是用于布局,没有其他意义。这并不意味着你不应该试图尽可能多地分离内容和布局;这只是意味着你不可能100%地到达那里。

这使得访问变得困难。想象一下你是一个文本浏览器,你想大声读出网站的内容给盲人。对于机器来说,大多数基于表的布局往往很难被刮削和“理解”。

在这些关于表格与CSS的讨论中,存在着许多精英主义/政治/狂热主义,但在很大程度上,CSS布局比基于表格的布局更干净。

理论上,它们也更容易维护。你想把导航从左向右移动吗?当然,只需更改一个CSS文件就可以了。但是,同样的,这通常在更复杂的网站上是平的,在这些网站中,CSS通常被深度嵌套,并且如此复杂,以至于更改并不容易,而模板系统使基于表的布局不完全不可维护。

值得一提的是,<table>标记在显示表格数据时仍被合法使用。我使用的经验法则是,如果我显示的东西可以很容易地活在一张纸上,那么一个表标签就是一种方法。

原因有很多。一个原因是可访问性……布局表不向内容添加语义,因此屏幕阅读器无法使用它们。所以只对表格数据使用表。

Here 有几点能更详细地回答这个问题吗?

• Tables are slow
• Tables can be inflexible
• Accessibility issues are easier with CSS
• Tables don’t degrade
• Tables don’t print as well

有一个 pretty good article 在SitePoint上,它将设计一个页面放在表中而不是CSS的头对头中。这是一个非常有趣的阅读,并强调了设计师/开发人员在使用表时的一些主要陷阱,例如,将源代码与表一起使用时,通常需要额外的源代码,未来的更改不可避免地会变得复杂。

批评基于表的布局的一个主要点是 固执的 . 它们被用来在所有浏览器中创建像素完美的页面。这样做的代价是刚性,这会损害可及性。800x600像素屏幕的布局设计可能会导致具有宽屏幕高清显示器的人不得不斜视才能阅读所有内容。当访问者在浏览器中强制增加字体大小时,会破坏布局,有时会非常严重。

CSS驱动的布局是 灵活的 并且可以用来创建一个在任何屏幕/字体大小下都很好看(类似但不相同)的布局。改进的内部结构还帮助屏幕阅读器和其他辅助工具,以及移动平台/设备。

表标记没有被弃用,在CSS驱动的布局中仍有一个角色要扮演:它应该在显示表格数据时使用(如在电子表格中)。为此,它是完美的-但它不应该再用于页面布局。

我强烈推荐你读这本书 Designing with Web Standards . 它适合设计师、开发人员和具有更多业务导向角色的人员。

我们的想法是 内容 / 意思 这是一个更好的方法,不仅因为它使页面易于修改和样式化,而且(可能更重要)因为它提高了可访问性,为那些使用屏幕阅读器的人,等等(以及搜索引擎!).阅读 Dive into Accessibility 有时。[如果你有表格数据,你当然应该使用表格。]

尽管“尝试使用CSS,而不是表格,用于布局”是一个非常重要的规则,你应该尽可能多地遵循它,最终,“做正确的事情”是有一定成本的,当它变得太高时,你应该重新考虑你的优先权。见 http://giveupandusetables.com/

这在主题上可能不正确,但我对CSS布局最常见的问题是,它们可能难以设置,因此它们总是拉伸父节点而不是溢出父节点。当你遇到一个不太罕见的例子,比如IE做了与FF完全不同的事情时,这会变得更痛苦。用一张桌子来解决这个问题通常比其他被迫使用的各种JS解决方法更容易、更兼容。

老实说,那些反对餐桌的人常常仅仅是标准纳粹分子。事实上,自从“leading”涉及使用实际的lead以来,人类一直在使用表进行布局。

反对表的主要论点是可访问性;这是一个重要的主题。然而,CSS只是一个针对真正罪魁祸首的创可贴的解决方案:HTML是一种可怕的标记语言!

如果HTML不应该用于布局,那么为什么我们有<center>、<b>、<u>或<i>?为什么我们没有一个<story>标记来语义地将段落分组?为什么我们有6个标题标签?

我们需要停止假装HTML是严格语义的,而很明显它不是。虽然CSS擅长实现表示,但它并不擅长定义它。如果是的话,我们不需要使用DIV SOUP来进行3列布局。HTML5真正应该发生的事情(当然不是)是让布局标签具有明确的角色,并使用CSS来澄清这些标签的作用。

老实说,不用太担心使用表格。即使是一些最好的、语义上最正确的人,也建议使用表,如果这样更便于文档的流动。仅仅使用有用的东西-使用表格的不太好。

随着IE8对新的CSS显示属性的支持,关于表和CSS的这场争论可能很快就会结束。由于以网格/表格格式考虑布局更容易和明智,因此 表,表行,表单元格,表标题,表列,表行组, 等,因为CSS属性将大大简化布局实现。

这个 article 有详细的概述。

• 负载较慢
• 语义错误

大多数优点(更快,没有spacer.gif,可访问性,内容与标记等)都已经提到了,但没人提到CSS,这让我吃惊。 can 做一些表格不能做的事情,或者至少更简单。

此外,使用正确的工具来完成正确的工作也是一回事。表格用于表格数据,CSS用于设置内容的样式。人们往往忘记的是,你也可以 style your tables …

问题是缺乏浏览器支持。因此人们使用黑客。因此,浏览器对CSS的解释不同,以适应这些黑客。这是一个永无止境的循环。