在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布局非常适合于移动设备、大屏幕、打印和其他显示类型的内容,但有时,内容必须以非常特定的方式显示,如果这要求屏幕阅读器无法轻松访问它,那么它可能是非常合理的。

其他回答

因为维护一个使用表格的网站是非常困难的,并且需要更长的编码时间。如果你害怕漂浮的潜水器,那就去上一门潜水课吧。它们并不难理解,而且它们的效率大约是前者的100倍,麻烦也少了100万倍(除非你不理解它们——但是,嘿,欢迎来到计算机的世界)。

任何考虑用表格做布局的人最好不要指望我来维护它。这是渲染网站最落后的方式。感谢上帝,我们现在有了更好的选择。我永远不会回去。

有些人可能没有意识到使用现代工具创建一个网站所带来的时间和精力的好处,这很可怕。

一般来说,表并不比CSS更容易或更易于维护。然而,在一些特定的布局问题中,表确实是最简单和最灵活的解决方案。

在表示标记和CSS支持相同类型的设计的情况下,CSS显然是更可取的,没有人会认为字体标记比在CSS中指定排版更好,因为CSS提供了与字体标记相同的功能,但以一种更干净的方式。

The issue with tables, however, is basically that the table-layout model in CSS is not supported in Microsoft Internet Explorer. Tables and CSS are therefore not equivalent in power. The missing part is the grid-like behavior of tables, where the edges of cells align both vertically and horizontally, while cells still expand to contain their content. This behavior is not easy to achieve in pure CSS without hardcoding some dimensions, which makes the design rigid and brittle (as long as we have to support Internet Explorer - in other browsers this is easliy achieved by using display:table-cell).

因此,这并不是一个表或CSS更可取的问题,而是一个认识到使用表可以使布局更灵活的具体情况的问题。

不使用表的最重要原因是可访问性。Web内容可访问性指南http://www.w3.org/TR/WCAG10/建议不要使用表格进行布局。如果您担心可访问性(在某些情况下,您可能有法律义务这样做),即使表更简单,也应该使用CSS。请注意,您总是可以用CSS创建与表相同的布局,这可能只是需要更多的工作。

无论如何,这并不是一个明确的论点,但是对于CSS,你可以使用相同的标记并根据介质改变布局,这是一个很好的优势。例如,对于打印页面,您可以安静地抑制导航,而不必创建打印机友好的页面。

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

使用一个表的整体布局和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遵从性

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

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

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