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


当前回答

数据:使用表格。布局:使用样式。使用非常精简的浏览器(即没有样式,只有普通标记的Links 2或Lynx)可以最快地呈现表。

其他回答

CSS布局通常在可访问性方面要好得多,前提是内容以自然的顺序出现,并且没有样式表也有意义。不仅仅是屏幕阅读器难以适应基于表格的布局:它们也使移动浏览器更难正确呈现页面。

此外,使用基于div的布局,你可以很容易地用打印样式表做一些很酷的事情,比如从打印页面中排除页眉、页脚和导航——我认为这是不可能的,或者至少很难用基于表格的布局做到这一点。

If you're doubting that separation of content from layout is easier with divs than with tables, take a look at the div-based HTML at CSS Zen Garden, see how changing the stylesheets can drastically change the layout, and think about whether you could achieve the same variety of layouts if the HTML was table based... If you're doing a table-based layout, you're unlikely to be using CSS to control all the spacing and padding in the cells (if you were, you'd almost certainly find it easier to use floating divs etc. in the first place). Without using CSS to control all that, and because of the fact that tables specify the left-to-right and top-to bottom order of things in the HTML, tables tend to mean that your layout becomes very much fixed in the HTML.

实际上,我认为完全改变一个基于div和css的设计而不改变div是非常困难的。然而,使用基于div和css的布局,就更容易调整不同块之间的间距以及它们的相对大小。

看这个重复的问题。

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

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

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

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

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

你会发现其中的不同。

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

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

参见:过度使用ViewState

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

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

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

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

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

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