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


当前回答

我很抱歉我的英语不好,但还有一个原因:

我在一些政府机构工作,不使用TABLE的首要原因是残疾人。他们使用机器“翻译”网页。

问题是这个“翻译机器”不能阅读网站,如果它是由TABLE。为什么?因为TABLE是用于数据的。

事实上,如果你使用TABLES,你必须为每个cell指定一些信息,让残疾人知道他们在TABLE中的位置。想象一下,你有一个大表格,必须放大才能看到屏幕上的一个单元格:你必须知道你在哪一行/col。

因此,使用DIV,并且禁用可以简单地阅读文本,并且不会得到一些关于行/cols的奇怪信息,当它们不需要在那里时。

我也更喜欢TABLE来制作快速简单的模板,但我现在习惯了CSS…它很强大,但你真的必须知道你在做什么……:)

其他回答

一个例子:你想要居中 一个页面的主要内容区域,但在 为了把浮体装在里面, 它需要浮动。没有 CSS中的float: center。

这并不是在居中元素中“包含浮点数”的唯一方法。所以,这根本不是一个好的论点!

在某种程度上,“divs vs table”是一个错误的前提。

把一页快速地分成三列?说实话,表格更简单。但是没有专业人士将它们用于布局,因为它们将页面元素的位置锁定在页面中。

真正的争论是“由CSS完成的定位(最好是在远程文件中)”,而不是“在页面中由HTML完成的定位”。相对于后者,每个人都能看到前者的好处吗?

Size -- if your page layout is in the HTML, in the pages, it can't be cached, and it has to be repeated on every page. You will save enormous amounts of bandwidth if your layout is in a cached CSS file, not in the page. Multiple developers can work on the same page at the same time -- I work on the HTML, other guy works on the CSS. No repository needed, no problems with over-writing, file locking etc. Making changes is easier -- there will be problems with layout in different browsers, but you only have to fix one file, the CSS file, to sort them out. Accessibility, as mentioned a lot previously. Tables assume a two-dimensional layout works for everyone. That's not how some users view your content and it's not how Google views your content.

考虑一下:

[ picture ] [ picture ] [ picture ]
[ caption ] [ caption ] [ caption ]

表示包含6个单元格的表中的两行。能看到二维表格布局的人会在每张图片下看到标题。但是使用语音合成,或者PDA,以及搜索引擎蜘蛛,那是

picture picture picture caption caption caption

有了表格,这种关系就明显消失了。

div和CSS是否更适合在HTML页面上简单地布局矩形以在最短的时间内实现给定的设计?不,他们可能不是。但我不是在快速布局矩形来实现给定的设计。我想的是更大的前景。

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

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

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

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

使用DIV,您可以轻松地进行切换。例如,你可以这样做:

Menu | Content

Content | Menu

Menu
----
Content

在CSS中更改它很容易,而在HTML中则不然。你也可以提供几种风格(右手,左手,专为小屏幕)。

在CSS中,您还可以将菜单隐藏在用于打印的特殊样式表中。

另一个好处是,你的内容在代码中总是按照相同的顺序(菜单在前,内容在后),即使在视觉上它是以其他方式呈现的。

我想这事已经过去了。如果你看看行业的发展方向,你会发现CSS和开放标准是这场讨论的赢家。这反过来意味着对于大多数html工作,除了表单,设计师将使用div而不是表格。我很难做到这一点,因为我不是CSS专家,但事实就是这样。

看起来你只是习惯了桌子,仅此而已。 将布局放在表格中会限制你的布局。用CSS你可以移动位,看看http://csszengarden.com/ 不,布局通常不需要很多嵌套的div。

没有表格的布局和适当的语义HTML更干净,因此更容易阅读。 为什么不理解CSS的人要尝试阅读它呢?如果有人认为自己是web开发人员,那么对CSS的良好掌握是必须的。

SEO的好处来自于将最重要的内容放在页面上方的能力 拥有更好的内容与标记比率。

http://www.hotdesign.com/seybold/