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


当前回答

看这个重复的问题。

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

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

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

其他回答

另外,别忘了,表格在移动浏览器上的渲染效果并不好。当然,iPhone拥有强大的浏览器,但并不是每个人都有iPhone。对于现代浏览器来说,表呈现可能是花生,但对于移动浏览器来说,它却是一堆西瓜。

我个人发现很多人使用了太多的<div>标记,但如果适当,它可以非常干净且易于阅读。你提到人们阅读CSS比阅读表格更困难;就“代码”而言,这可能是真的;但是在读取内容方面(查看>源代码),用样式表理解结构要比用表容易得多。

508符合性-屏幕阅读器能够理解你的标记。 等待呈现——直到</table>元素结束,表格才会在浏览器中呈现。

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

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

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

1:是的,你的用户很关心。如果他们使用屏幕阅读器,它就会丢失。如果我使用任何其他试图从页面中提取信息的工具,遇到不用于表示表格数据的表是一种误导。

div或span用于分隔内容是可以接受的,因为这正是那些元素的含义。当我,一个搜索引擎,一个屏幕阅读器或其他任何东西,遇到一个表格元素,我们期望这意味着“以下是表格数据,表示在一个表中”。当我们遇到div时,我们期望“这是一个用于将内容划分为单独部分或区域的元素。

2 .可读性:错误。如果所有的表示代码都是css,我可以阅读html,我将理解页面的内容。或者我可以阅读css和理解的表示。如果html中的所有内容都是混杂在一起的,那么在我甚至可以看到什么是内容,什么不是内容之前,我必须在脑海中剔除所有与表示相关的部分。 此外,我害怕遇到一个不懂css的web开发人员,所以我真的不认为这是一个问题。

3:表比较慢:是的,它们比较慢。原因很简单:在呈现表之前,必须对表进行完整的解析,包括其内容。可以在遇到div时呈现它,甚至在它的内容被解析之前。这意味着div会在页面加载完成之前显示出来。

还有一个好处是,表格更加脆弱,在不同的浏览器中呈现的效果并不总是一样的,不同的字体和字体大小以及所有其他可能导致布局变化的因素。表格是一种很好的方法,可以确保你的网站在某些浏览器中会偏离一两个像素,当用户改变字体大小或以任何其他方式改变设置时,它不会很好地缩放。

Of course #1 is the big one. A lot of tools and applications depend on the semantic meaning of a webpage. The usual example is screen-readers for visually impaired users. If you're a web developer, you'll find that many large companies who may otherwise hire you to work on a site, require that the site is accessible even in this case. Which means you have to think about the semantic meaning of your html. With the semantic web, or more relevantly, microformats, rss readers and other tools, your page content is no longer viewed exclusively through a browser.

对于为了简单或临时的东西而拼凑在一起的HTML,表很有用。如果你正在构建一个大型网站,你应该使用div和CSS,因为随着时间的推移,随着网站的变化,它将更容易维护。