在HTML中,表格不应该用于布局,这似乎是普遍的观点。

Why?

我从来没有(老实说,很少)看到过支持这一点的有力论据。通常的答案是:

It's good to separate content from layoutBut this is a fallacious argument; Cliche Thinking. I guess it's true that using the table element for layout has little to do with tabular data. So what? Does my boss care? Do my users care?Perhaps me or my fellow developers who have to maintain a web page care... Is a table less maintainable? I think using a table is easier than using divs and CSS.By the way... why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs. Readability of the codeI think it's the other way around. Most people understand HTML, few understand CSS. It's better for SEO not to use tablesWhy? Can anybody show some evidence that it is? Or a statement from Google that tables are discouraged from an SEO perspective? Tables are slower.An extra tbody element has to be inserted. This is peanuts for modern web browsers. Show me some benchmarks where the use of a table significantly slows down a page. A layout overhaul is easier without tables, see css Zen Garden.Most web sites that need an upgrade need new content (HTML) as well. Scenarios where a new version of a web site only needs a new CSS file are not very likely. Zen Garden is a nice web site, but a bit theoretical. Not to mention its misuse of CSS.

我对使用divs + CSS而不是表的良好参数非常感兴趣。


当前回答

我想补充的是,基于div的布局更容易维护、发展和重构。只是在CSS中做了一些改变来重新排序元素,这就完成了。根据我的经验,重新设计使用表的布局是一场噩梦(如果有嵌套的表,则会更糟)。

从语义的角度来看,代码也有意义。

其他回答

为了回应“表格更慢”的论点——你考虑的是渲染时间,这是一个错误的度量。通常情况下,开发人员会编写一个巨大的表格来完成页面的整个布局——这大大增加了要下载的页面的大小。不管你喜不喜欢,仍然有大量的拨号用户。

参见:过度使用ViewState

我曾经处理过一个包含6层嵌套表的网站,这个网站是由一些应用程序生成的,并且生成了无效的HTML,事实上,我花了3个小时的时间来纠正它,因为一个小的改变。

这当然是边缘情况,但是基于表的设计是不可维护的。如果你使用css,你分离了样式,所以在修复HTML时,你不必担心破坏。

同样,用JavaScript试试这个方法。将单个表单元格从一个位置移动到另一个表中的另一个位置。执行起来相当复杂,div/span只需要复制粘贴即可。

“我的老板在乎吗?”

如果我是你的老板。你会在乎的。,)如果你珍视你的生命。

对我来说,一个巨大的问题是,表,特别是嵌套表,需要更长的时间来呈现比一个正确布局的css实现。(你可以让css一样慢)。

所有浏览器呈现css的速度都更快,因为每个div都是一个单独的元素,所以用户在阅读时可以加载屏幕。(对于庞大的数据集等)。我在那个实例中使用了css而不是表格,甚至没有处理布局。

嵌套的表(单元格中的表等)直到找到最后一个“/table”才会呈现到浏览器窗口。更糟糕的是,定义不清的表有时甚至无法呈现!或者当它发生的时候,事情就会不正常。(没有正确地与“TD”等共进)

我在大多数情况下使用表格,但当涉及到大数据和希望为最终用户快速呈现屏幕时,我尽最大努力利用CSS所提供的东西。

如果你在这方面支持表格角度,找一个有表格的网站,然后给自己买一个屏幕阅读器——关掉屏幕阅读器,关掉你的显示器。

然后尝试一个不错的语义正确的div布局网站。

你会发现其中的不同。

如果表格中的数据是表格而不是为了布局页面,那么表格并不是邪恶的。

围绕语义标记的整个思想是标记和表示的分离,其中包括布局。

Div并没有取代表,它们在将内容分离为相关内容块(,)方面有自己的用途。当您不具备这些技能并且依赖于表格时,您通常必须将内容分离到单元格中以获得所需的布局,但是在使用语义标记时,您不需要触摸标记来实现表示。在生成标记而不是静态页面时,这一点非常重要。

开发人员需要停止提供暗示布局的标记,以便我们这些拥有显示内容技能的人能够继续工作,并且开发人员不必在表示需要更改时返回他们的代码进行更改。