在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而不是表的良好参数非常感兴趣。


当前回答

在维护内容的同时进行网站维护和设计检修(这一直都在发生,尤其是在电子商务中):

内容和设计通过表格混合在一起=更新内容和设计。

内容与设计分离=更新设计和少量内容。

如果我有自己的方式,我会将内容保存在PHP中,生成XML,转换为XSLT中的标记,并使用CSS和Javascript进行交互设计。对于Java方面的东西,JSP到JSTL来生成标记。

其他回答

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

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

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

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

我将一个接一个地看你的论点,并试着指出其中的错误。

将内容与布局分开是很好的 但这是一个错误的论点;陈词滥调的思考。

It's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.

那又怎样?我的老板在乎吗?我的用户关心吗?

视情况而定。你的老板是尖头发吗?那他可能不在乎。如果她有能力,那么她就会在乎,因为用户会在乎。

也许我或我的开发伙伴谁必须维护一个网页关心…表是否更难维护?我认为使用表格比使用div和css更容易。

大多数专业的web开发人员似乎反对你[需要引用]。事实上,表的可维护性较差,这是显而易见的。使用表格进行布局意味着更改公司布局实际上意味着更改每个页面。这可能会非常昂贵。另一方面,明智地将语义上有意义的HTML与CSS结合使用可能会将此类更改限制在CSS和所使用的图片上。

顺便说一下……为什么使用div或span可以很好地将内容与布局分开,而不是表格?只有div的良好布局通常需要大量嵌套的div。

深度嵌套<div>是反模式,就像表布局一样。优秀的网页设计师不需要太多这样的东西。另一方面,即使是这样深嵌套的div也没有很多表布局的问题。事实上,它们甚至可以通过逻辑地将内容划分为多个部分来构成语义结构。

代码的可读性 我觉得正好相反。大多数人懂html,很少人懂css。这是简单的。

“大多数人”不重要。专业人士。对于专业人士来说,表格布局比HTML + CSS带来更多的问题。这就像是说我不应该使用GVim或Emacs,因为记事本对大多数人来说更简单。或者我不应该使用LaTeX,因为MS Word对大多数人来说更简单。

SEO最好不要使用表格

我不知道这是不是真的,也不会把它作为一个论点,但它是合乎逻辑的。搜索引擎搜索相关数据。虽然表格数据当然可能是相关的,但它很少是用户搜索的内容。用户搜索页面标题或类似突出位置中使用的术语。因此,将表格内容排除在过滤之外,从而大幅减少处理时间(和成本!)是合乎逻辑的。

表比较慢。 必须插入一个额外的tbody元素。这对于现代网络浏览器来说是微不足道的。

额外的元素与表变慢无关。另一方面,表的布局算法要困难得多,浏览器通常必须等待整个表加载后才能开始布局内容。此外,缓存布局将不起作用(CSS可以很容易地缓存)。所有这些都在前面提到过。

向我展示一些使用表会显著降低页面速度的基准测试。

不幸的是,我没有任何基准测试数据。我自己也会感兴趣,因为这个论点确实缺乏一定的科学严谨性。

大多数需要升级的网站也需要新的内容(html)。一个新版本的网站只需要一个新的css文件的场景是不太可能的。

Not at all. I've worked on several cases where changing the design was simplified by a separation of content and design. It's often still necessary to change some HTML code but the changes will always be much more confined. Additionally, design changes must on occasion be made dynamically. Consider template engines such as the one used by the WordPress blogging system. Table layouts would literally kill this system. I've worked on a similar case for a commercial software. Being able to change the design without changing the HTML code was one of the business requirements.

Another thing. Table layout makes automated parsing of websites (screen scraping) much harder. This might sound trivial because, after all, who does it? I was surprised myself. Screen scraping can help a lot if the service in question doesn't offer a WebService alternative to access its data. I'm working in bioinformatics where this is a sad reality. Modern web techniques and WebServices have not reached most developers and often, screen scraping is the only way to automate the process of getting data. No wonder that many biologists still perform such tasks manually. For thousands of data sets.

事实上,这是一个激烈争论的问题,这证明了W3C未能预见到将尝试的布局设计的多样性。使用divs+css进行语义友好的布局是一个很好的概念,但实现的细节有很大的缺陷,实际上限制了创作的自由。

我曾试图将我们公司的一个网站从餐桌切换到餐桌,这让我非常头疼,以至于我完全放弃了投入其中的工作时间,回到餐桌上。为了获得垂直对齐的控制,我试图与我的跳水手搏斗,这让我受到了重大的心理问题的诅咒,只要这场辩论继续下去,我就永远不会动摇。

人们必须经常想出复杂而丑陋的变通办法来实现简单的设计目标(比如垂直对齐),这一事实强烈地表明这些规则还不够灵活。如果规格已经足够了,那么为什么高调的网站(如SO)发现有必要使用表格和其他变通方法来改变规则呢?

作为纯布局使用的表格确实会带来一些可访问性问题(我听说过)。但我理解这里被问到的问题,你正在通过使用表格来确保页面上某些东西的正确对齐来破坏网络。

我以前听到有人说,FORM标签和输入实际上是数据,应该允许它们进入表。

使用一个表来确保一些元素正确排列会导致代码大量增加,这种说法往往包含了单个DIV如何满足所有需求的示例。他们不总是包括10行CSS和特殊的浏览器技巧,他们必须为IE5、IE5.5、IE6、IE7……

我认为这仍然是关于在你的设计中使用平衡。表格在工具箱里,记住它们是干什么用的……

看这个重复的问题。

你忘记的一项是可访问性。例如,如果你需要使用屏幕阅读器,基于表格的布局就不能很好地转换。如果您使用政府,则可能需要支持可访问的浏览器,如屏幕阅读器。

我也认为你低估了你在问题中提到的一些事情的影响。例如,如果您既是设计人员又是程序员,您可能没有充分了解它如何将表示和内容分开。但一旦你进入一个商店,他们是两个不同的角色,优势就开始变得清晰起来。

如果你知道你在做什么并且有好的工具,CSS在布局方面确实比表格有显著的优势。虽然每一件物品本身都不能证明放弃餐桌是合理的,但总的来说还是值得的。