在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中的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页面上简单地布局矩形以在最短的时间内实现给定的设计?不,他们可能不是。但我不是在快速布局矩形来实现给定的设计。我想的是更大的前景。
Layout should be easy. The fact that there are articles written on how to achieve a dynamic three column layout with header and footer in CSS shows that it is a poor layout system. Of course you can get it to work, but there are literally hundreds of articles online about how to do it. There are pretty much no such articles for a similar layout with tables because it's patently obvious. No matter what you say against tables and in favor of CSS, this one fact undoes it all: a basic three column layout in CSS is often called "The Holy Grail".
如果这不能让你说“WTF”,那么你现在真的需要放下酷爱饮料了。
我喜欢CSS。它提供了惊人的样式选项和一些很酷的定位工具,但作为一个布局引擎,它是有缺陷的。需要某种类型的动态网格定位系统。一个直接的方法来对齐多个轴上的盒子,而不知道他们的大小。我不在乎你叫它<table>或<gridlayout>或其他什么,但这是CSS中缺少的一个基本布局特性。
更大的问题是,由于不承认有缺失的特性,CSS狂热者一直在阻碍CSS的发展。如果CSS能像世界上其他布局引擎一样提供像样的多轴网格定位,我很乐意停止使用表格。(你应该意识到这个问题已经被除了W3C之外的所有人用多种语言解决过很多次了,对吧?没有人否认这样一个功能是有用的。)
叹息。足够的通风。去吧,把头埋进沙子里。