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


当前回答

作为纯布局使用的表格确实会带来一些可访问性问题(我听说过)。但我理解这里被问到的问题,你正在通过使用表格来确保页面上某些东西的正确对齐来破坏网络。

我以前听到有人说,FORM标签和输入实际上是数据,应该允许它们进入表。

使用一个表来确保一些元素正确排列会导致代码大量增加,这种说法往往包含了单个DIV如何满足所有需求的示例。他们不总是包括10行CSS和特殊的浏览器技巧,他们必须为IE5、IE5.5、IE6、IE7……

我认为这仍然是关于在你的设计中使用平衡。表格在工具箱里,记住它们是干什么用的……

其他回答

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

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

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

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

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

当然,这篇文章有点小题大做,争论似乎很简单,很容易反驳。

网页是Web开发人员的领域,如果他们说div和CSS比表格更好,那对我来说已经足够好了。

如果布局是由服务器应用程序生成的表实现的,那么新的布局意味着对应用程序的更改,应用程序的重新构建和重新部署,而不仅仅是对css文件的更改。

另外,可访问性。用于布局的表格会使网站无法访问,所以不要使用它们。这是显而易见的,更不用说违法了。

我很惊讶地发现有些问题还没有涉及到,所以除了之前提出的所有非常有效的观点之外,以下是我的2点看法:

.1.CSS & SEO:

a) CSS used to have a very significant impact on SEO by allowing to position the content in the page wherever you want. A few years ago, Search Engines were giving a significant emphasis to "on-page" factors. Something at the top of the page was deemed more relevant to the page than something located at the bottom. "Top of the page" for a spider meant "at the beginning of the code". Using CSS, you could organize your keyword-rich content at the beginning of the code, and still position it wherever you liked in the page. This is still somewhat relevant, but on page factors are less and less important for page ranking.

b)当布局转移到CSS时,HTML页面更轻,因此对于搜索引擎蜘蛛加载更快。(蜘蛛不需要下载外部CSS文件)。快速加载页面是一个重要的排名考虑几个搜索引擎,包括谷歌

c) SEO工作通常需要测试和更改内容,这与基于CSS的布局更方便

。2。生成的内容:

用编程方式生成表要比等效的CSS布局容易得多。

foreach ($comment as $key=>$value)
{
   echo "<tr><td>$key</td><td>$value</td></tr>";
}

生成表很简单,也很安全。它是自包含的,可以很好地集成到任何模板中。用CSS做同样的事情要困难得多,而且可能根本没有任何好处:很难在飞行中编辑CSS样式表,并且内联添加样式与使用表没有什么不同(内容没有与布局分离)。

此外,在生成表时,内容(在变量中)已经与布局(在代码中)分离,使其易于修改。

这就是为什么一些设计非常好的网站(例如SO)仍然使用表格布局的原因之一。

当然,如果需要通过JavaScript对结果进行操作,那么div是值得的。

。3。快速转换测试

在找出适合特定受众的方法时,能够以各种方式更改布局以找出最佳结果是很有用的。基于CSS的布局使事情变得相当简单

。4。不同的问题有不同的解决方案

布局表通常被鄙视,因为“每个人都知道div和CSS”才是正确的方式。

然而,事实仍然是,表创建更快,更容易理解,比大多数CSS布局更健壮。(是的,CSS可以很健壮,但是在不同的浏览器和屏幕分辨率上快速浏览一下网络就会发现情况并非如此)

桌子有很多缺点,包括维护、缺乏灵活性……但是我们不要把孩子和洗澡水一起丢了。快速可靠的解决方案有很多专业用途。

前段时间,我不得不用表格重写了一个干净简单的CSS布局,因为相当一部分用户会使用对CSS支持非常差的旧版本IE

就我而言,我已经厌倦了“哦,不!”布局的表格!”

至于那些“它不是为了这个目的而设计的,因此你不应该这样使用它”的人群,这不是虚伪吗?你怎么看待所有的CSS技巧,你必须使用使该死的东西工作在大多数浏览器?他们是为了这个目的吗?

当您需要确保元素在布局中保持特定的物理关系时,请使用表格。对于数据,表格通常是最适合使用的布局元素,因为您不希望列以超出预期的方式包装,从而混淆了关联。

也有人可能会说,必须保持特定关系的非数据元素也应该呈现在表中。

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