为什么谷歌和推特使用表格布局?

40

可能是重复问题:
在“现代”网站上使用<table>标签有意义吗?

无论我去哪里,我都会看到不要使用表格布局,它很糟糕,即使Google也这么说,那么为什么最受欢迎的网站之一,如Google和Twitter,会在其主页上使用它呢?

我认为这不是任何错误或其他愚蠢的问题。

我唯一能想到的原因是,即使客户端不支持CSS(如Lynx),他们也希望页面看起来相似。

那么为什么每个人都说它很糟糕,如果互联网上最大的网站都在使用它呢?

在我看来,有些情况下,像上面提到的那些情况,拥有相同的外观非常重要,那么使用表格就可以了。

编辑:同样的问题也适用于HTML元素,例如<center>,或使用属性align格式化文本和其他“用于替代CSS功能的HTML属性和元素”。


1
这是一个很好的问题。我也注意到一些主要的企业甚至包括微软和谷歌都没有遵守XHTML标准。那么,最好的前进方式是什么? - DanDan
2
重复的副本...请参见https://dev59.com/b3RA5IYBdhLWcg3w4R_o#796525。 - womp
2
这并不完全是一个重复问题,因为这个问题非常具体。 - Jakub Arnold
1
许多大型网站的标记确实令人震惊。以亚马逊为例。 - Steve Claridge
2
亚马逊的网站到底有多糟糕呢?它采用浮动布局,可以在旧的、糟糕的浏览器上运行。我一直在关注它,它变得越来越好了,但很多零售商仍然会收到来自旧浏览器的大量访问。 - Nosredna
显示剩余2条评论
9个回答

18

对于这些人来说,页面加载时间是至关重要的,而带宽使用也是极高的。

我得说,他们在原始数据速度方面使用表格,因为他们每天提供的带宽非常大。

此外,请注意他们在页面头部使用内联样式来减少HTTP请求的数量,以帮助加速页面加载时间。


哎呀,我完全没有想到这一点,但似乎很合理。 - Jakub Arnold
2
我也必须同意其他答案,表格非常有用于显示表格数据。此外,它们为这种极简主义页面布局提供了一个优秀的跨浏览器一致性方式。 - jkelley
11
表格布局往往使用的带宽更多,而不是更少。 - Quentin
1
Twitter至少使用了一个老式的“回到1997年”的布局表格来处理其两列布局。Google的表格也可以用CSS轻松地完成许多更简单、更小的事情。它们只是在标记上做得不好。 - Quentin
为什么表格可以减少加载速度?请解释一下。例如,对于三个块级未经样式处理的元素,我使用了三个33个字符的div和一个具有三个单元格的69个字符的表格??? DIVS = 33 = <div> </div> <div> </div> <div> </div>。 TABLES = 69个字符= <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>。我知道这只是一个非常基本的例子,但为什么表格加载速度更快呢? - megaSteve4
显示剩余2条评论

17
布局比它应得的受到更多抨击。对于开发人员来说很容易使用,在几乎所有的Web浏览器中都是一致的,并且可以轻松地添加行/列,几乎不需要费力。

唯一的缺点是它违反了您的文档只包含内容,而设计应该分别包含(在CSS文件中)的口号。


18
表格布局不是很容易,它们很草率。这两者之间有很大的区别。试着维护某人的“轻松”表格布局,你会想拔光自己的头发。CSS的魔力不在于更短的前期开发时间,而在于日后的可维护性和可扩展性。 - William Brendel
2
除了使标记不易读、网站不易使用之外,如果在不适当的情况下使用表格,这只是一种非常糟糕的做法。此外,当你掌握基于CSS的布局时,与旧的基于表格的布局相比,它们更快速(除非你使用所见即所得编辑器,但你根本不应该这样做,因为代码质量很低)。 - Arve Systad
2
表格对于布局来说非常棒。CSS并不适合处理许多典型的布局场景。任何试图使用CSS进行基本布局以外操作的人可能都是“CSS宇航员”(请参见这个很好的答案https://dev59.com/E3RB5IYBdhLWcg3wvpqc#527826)。 - Plynx

14

谷歌不必关心在搜索引擎排名高... ;)


11

没错,同意。有时候,只有在某些情况下表格才是合适的选择。并不是所有人都在编写面向各种浏览器并需要支持语音合成等功能的网站。总的来说,应该学习和提高自己的技能,使用CSS定位等方法,但如果有人使用表格在网页上进行布局,也不会有什么坏处。

也许这个问题应该成为社区维基问答?


我强烈不同意这个观点。表格只有在放置表格式数据时才是适当的;所有其他内容都应该用语义化的方式标记 - 这使得页面在不支持 CSS 时很好地回退。(不过我同意社区 Wiki 部分 :)) - You
6
标记应该是语义化的,并且不受演示方式的影响......但是有时,即使对于非表格数据,使用表格也是合适的。经济原则高于意识形态,虽然选择一种方法可以让事情更简单,但并不存在一个适用于每种情况的万能方法。我像避瘟疫一样避免使用表格,它们很麻烦,但如果你确实需要,使用表格并不会导致任何事情变得更加困难,有时它甚至更有效。 - seanb
1
你不会相信我在这个答案上收到的踩数。天啊,只有7个赞和8个踩。人们对这种事情真的很奇怪。 - Neil Barnwell
2
@Neal - 你因为实事求是得到了我的+1。我曾经很容易对别人做事情的“错误”进行评判,现在更愿意给同行们以怀疑的余地,并意识到也许他们有充分的理由这样做,在真实世界开发的各种要求中,事情并不总是像学术抽象那样简单明了。Google和Twitter的务实主义者可能已经认真考虑过这个问题,并采用这种方式,因为它对他们目前来说是最好的选择,而不是因为他们缺乏CSS技能或只是懒惰。 - seanb

6

渲染虽然麻烦,但在不同的浏览器上基本保证了一致性。


什么是邪恶?(请更具体地说明!) - n00ki3
@n00ki3 - 在我看来,主要是标记语言的丑陋与 CSS 布局相比较。 - karim79
3
@n00ki3认为,表格是用于表格数据的;将它们用于布局是不语义化、效率低下、难以维护,并且几乎肯定会混淆屏幕阅读器等工具。 - You

4

表格布局在大多数浏览器上都能正常工作。Google和其他公司希望能够覆盖所有用户,而不仅仅是一些现代用户。采用不同的布局或布局技术难以维护,并且在提供内容方面成本高昂。 表格布局并不复杂。它很直接。您无需寻找css hack、浏览器不兼容性或其他问题。

表格布局不好。因为它们混合了布局和内容。


3

Twitter在网页模式下从手机上运行得非常好。由于有些网络浏览器真的很糟糕,因此我认为Twitter会尽其所能。

考虑到许多网站在手机上运行效果不佳,我更关心移动兼容性,而不是CSS布道者的担忧。


1
如果你稍微关注一下,就很容易实现与手机等移动设备的兼容性。这就是为什么我们有 @media - You

2

三个主要原因:

  1. 表格主要由于搜索引擎的原因而不好(还有它们会有点混乱DOM的问题,但那不太糟糕)。人们不会在搜索引擎上搜索Google,也不会在Twitter上普遍搜索帖子。
  2. 表格在几乎所有浏览器上都能一致地呈现,包括智能手机(这对Twitter尤其重要)。
  3. 表格消耗的带宽更少。两个站点都有巨大的数据负载,需要每一点速度。

2
你的第三点是错误的。使用表格进行布局实际上比基于CSS的布局渲染时间更长。也许你是想说“表格占用更少的带宽”? - William Brendel

1

浏览器支持 - 这些人需要让他们的网站在所有 Web 浏览器上完美呈现(包括新的、旧的和晦涩难懂的)。无论谁使用他们的网站以及他们使用的操作系统/浏览器是什么,这些网站都需要正常工作。

每个 Web 浏览器都支持自己的 CSS 实现,这会导致类似于各种浏览器中 JavaScript DOM 支持的问题。

页面加载时间 - 他们的页面也经过了页面加载时间的优化。如果用户加载页面的时间太长,他们就会去其他地方。仍然有很多没有宽带的用户,甚至许多移动设备在某些地方没有非常快速的连接。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接