在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设计我的布局时,我通常给每个主要部分都有自己的根(主体级别)div,并使用相对/绝对定位将其置于适当的位置。这比表更灵活一些,因为我不局限于可以用行和列表示的排列。

此外,如果我决定我想要重新安排布局(说我想要导航栏现在在右边),我可以简单地去改变一个地方(CSS文件)的元素位置,HTML不需要改变。如果我对表执行此操作,我将不得不进入并找到信息,并进行大量属性修改和复制粘贴以获得相同的效果。

事实上,使用CSS,我甚至可以让我的用户选择他们想要的布局如何工作。只要内容区域的一般大小不改变,我完全可以使用一些PHP脚本来根据用户的偏好输出CSS,并允许他们根据自己的喜好重新排列站点。同样,对于表也是可以的,但是维护起来要困难得多。

最后,CSS提供了一个表永远无法提供的主要好处:基于显示设备重新格式化内容的能力。CSS允许我在打印机上使用与显示器上完全不同的样式集(包括位置、格式等)。这也可以扩展到其他媒体,一个很好的例子是Opera Show,它允许一个设计巧妙(非常标准)的CSS增强页面被视为幻灯片显示。

因此,最终,灵活性和管理才是真正的赢家。一般来说,CSS允许你对布局做更多的事情。基于表的布局在技术上没有什么不标准的,但为什么要限制自己呢?

其他回答

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

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

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

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

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

Menu | Content

Content | Menu

Menu
----
Content

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

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

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

显而易见的答案:参见CSS Zen Garden。如果你告诉我你可以很容易地用基于表格的布局做同样的事情(记住- HTML没有改变),那么无论如何都要使用表格来布局。

另外两个重要的事情是可访问性和搜索引擎优化。

两者都关心信息以何种顺序呈现。如果基于表格的布局将导航放在页面上第二个嵌套表格的第2行的第3个单元格中,则无法轻松地将导航显示在页面顶部。

所以你的答案是可维护性,可访问性和SEO。

不要偷懒。即使事情有点难学,也要用正确的方式去做。

这并不一定是一场战争。和谐是可能的。

使用一个表的整体布局和div在其中。

<table> 
    <tr><td colspan="3"><div>Top content</div></td></tr>
    <tr> 
        <td><div>Left navigation</div></td> 
        <td><div>Main content</div></td> 
        <td><div>Right navigation</div></td> 
    </tr>
    <tr><td colspan="3"><div>Bottom content</div></td></tr>
</table>

看,没有嵌套表。

我读过很多关于如何用divs实现这一点的文章,但从来没有发现任何事情,每次都没有问题。

一旦你有了整体结构,Divs是很棒的,但坦率地说,流体页眉/页脚和三个流体列是Divs的一大痛苦。Divs不是为流动性而设计的,所以为什么要使用它们呢?

注意,这种方法将在链接文本中提供100%的CSS遵从性

我想补充的是,基于div的布局更容易维护、发展和重构。只是在CSS中做了一些改变来重新排序元素,这就完成了。根据我的经验,重新设计使用表的布局是一场噩梦(如果有嵌套的表,则会更糟)。

从语义的角度来看,代码也有意义。