为什么使用表格进行网站布局是如此邪恶

时间:2008-11-24 05:11:50

标签: html layout html-table

我是Winforms和业务引擎开发人员,他在2年多来第一次使用asp.net,在那段时间我注意到了一些约定变化。

反布局运动背后的逻辑是什么?

是否允许使用css类来处理布局,如果是这样,这应该是页面上的一个问题,你确定它会保持静态,还是只是被认为是“丑陋的”?

14 个答案:

答案 0 :(得分:34)

还有几点:

  • 不要狂热。 CSS并不完美,有些东西可以通过表格轻松完成。所以,如果你需要,在那里放一张小桌子。它不会杀了你。

  • 基于表格的布局的主要“邪恶”是那种深层嵌套的混乱,它曾经是获得对页面进行精确控制的唯一方法。您可以在表格中的表格中使用表格,并且策略性地放置透明图像以控制间距。我认为现在这种情况非常罕见,CSS会让你清理90%的混乱。

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

答案 1 :(得分:22)

它使得可访问性变得困难。想象一下,你是一个文本浏览器,你想要向盲人大声读出网站的内容。大多数基于表格的布局往往很难刮擦并“理解”机器。

在这些关于桌面与CSS的讨论中,有很多精英主义/政治/狂热主义在进行,但是在大规模上,CSS布局比基于表格的布局更清晰。

理论上,它们也更容易维护。说,你想从左到右移动导航?当然,只需更改一个CSS文件就可以了。但话说回来,这通常会落在更复杂的网站上,在这些网站上,CSS经常被深深嵌套,而且复杂,变化并不容易,而模板系统使基于表格的布局不是完全无法维护的。

答案 2 :(得分:16)

值得一提的是< table>在显示表格数据时,仍然可以合法地使用标签。我使用的经验法则是,如果我正在显示一些可以轻松存在于speadsheet中的内容,那么表格标签就是最佳选择。

答案 3 :(得分:8)

有很多原因。一个原因是可访问性...布局表不会向内容添加语义,因此屏幕阅读器会遇到问题。因此,仅将表格用于表格数据。

Here有几点可以更详细地回答这个问题

答案 4 :(得分:5)

站点上有一个pretty good article,它将表格与css设计成一个页面。这是一个非常有趣的阅读,并突出了设计人员/开发人员在使用表格(如表格中包含损坏的源代码等表格)时的一些主要缺陷,通常需要额外的源代码,未来的更改也不可避免地复杂。

答案 5 :(得分:4)

批评基于表格的布局的一个主要观点是它们刚性。它们被用于在所有浏览器中创建像素完美的页面。这样做的代价是刚性,这会损害可访问性。 800x600像素屏幕的布局设计可能会使具有宽屏高清显示器的人不得不真正地眯着眼睛阅读所有内容。当访问者强制增加浏览器中的字体大小时,它会破坏布局,有时会非常糟糕。

CSS驱动的布局灵活,可用于创建任何屏幕/字体大小看起来不错(和类似但不相同)的布局。改进的内部结构还有助于屏幕阅读器和其他可访问性工具,以及移动平台/设备。

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

答案 6 :(得分:2)

我强烈建议您阅读这本书Designing with Web Standards。它适合具有更多业务导向角色的设计师,开发人员和人员。

答案 7 :(得分:2)

我们的想法是,标记页面的内容 / 含义是一件更好的事情,不仅因为它使其易于修改和设计,而且(可能更重要的是因为它改善了可访问性,对于那些使用屏幕阅读器等(以及搜索引擎!)。有时读Dive into Accessibility。 [如果你有表格数据,你当然应该使用表格。]

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

答案 8 :(得分:2)

这可能不是正确的主题,但我对CSS布局最常见的问题是它们很难设置,因此它们总是拉伸父节点而不是仅溢出它。当你遇到一个非常罕见的IE做一个与FF完全不同的事情时,这就变得更加痛苦。使用表修复这个混乱通常比您不得不使用的各种JS解决方法更容易,更兼容。

答案 9 :(得分:2)

老实说,反桌上的人群通常只是简单地成为标准纳粹分子。事实上,人类一直在使用表格进行布局,因为“领先”涉及使用实际的线索。

对表的主要参数是accessiblity;这是一个重要的话题。然而,CSS只是真正罪魁祸首的创可贴解决方案:HTML是一种可怕的标记语言!

如果HTML从来不应该用于布局,那么为什么我们有< center>,< b&gt ;,< u>或< i>?为什么我们没有< story>标签在语义上用段组合?为什么我们有6个标题标签?

我们需要停止假装HTML是严格意义上的,但显然不是。虽然CSS擅长实现演示,但定义它并不是那么好。如果是的话,我们不需要div汤来做3列布局。 HTML5真正应该发生的事情(但当然不是)是让布局标签具有明确的角色,并使用CSS来阐明这些标签的作用。

答案 10 :(得分:1)

老实说,不要过于担心使用表格。即使一些最好的,语义最正确的人建议使用表格,如果它更容易流动文档。只是使用适合的东西 - 使用表格的不利之处并不是那么好。

答案 11 :(得分:1)

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

article 有详细的概述。

答案 12 :(得分:1)

  • 加载速度较慢
  • 语义错误

答案 13 :(得分:1)

我们已经提到了大多数优点(更快,没有spacer.gif,可访问性,内容与标记等),但令我惊讶的是,没有人提到css can做的东西表不能或不在最不容易。

此外,只需使用合适的工具即可完成正确的工作。表格用于表格数据,css用于为您的内容设置样式。人们往往忘记的是,你也可以style your tables ......

问题在于缺乏浏览器支持。因此人们使用黑客。因此,浏览器以不同方式解释css以适应这些黑客攻击这是一个永无止境的圈子。