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

其他回答

将内容与布局分开是很好的 但这是一个错误的论点;陈词滥调的思考

这是一个错误的论点,因为HTML表格是布局!内容是表中的数据,表示是表本身。这就是为什么从HTML中分离CSS有时会非常困难。您不是将内容与表示分开,而是将表示与表示分开!一堆嵌套的div和一个表没有什么不同——它只是一组不同的标签。

把HTML和CSS分开的另一个问题是,它们需要彼此的密切了解——你真的不能把它们完全分开。无论您做什么,HTML中的标记布局都与CSS文件紧密耦合。

我认为表与div的区别取决于应用程序的需要。

在我们在工作中开发的应用程序中,我们需要一个页面布局,其中各个块将动态地调整自己的大小以适应其内容。我花了几天时间试图让它与CSS和div跨浏览器工作,这是一个完全的噩梦。我们换了桌子,一切都很顺利。

然而,我们的产品有一个非常封闭的受众(我们销售的是带有web界面的硬件),可访问性问题不是我们关心的问题。我不知道为什么屏幕阅读器不能很好地处理表格,但我猜如果这是开发人员必须处理的方式。

我很惊讶地发现有些问题还没有涉及到,所以除了之前提出的所有非常有效的观点之外,以下是我的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技巧,你必须使用使该死的东西工作在大多数浏览器?他们是为了这个目的吗?

我想使用表格元素进行布局确实与表格数据没有什么关系。那又怎样?我的老板在乎吗?我的用户关心吗?

谷歌和其他自动化系统确实关心这些问题,而且它们在许多情况下同样重要。语义代码对于非智能系统来说更容易解析和处理。

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

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

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

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

DOM操作在基于表的布局中是很困难的。

使用语义div:

$('#myawesomediv').click(function(){
    // Do awesome stuff
});

表:

$('table tr td table tr td table tr td.......').click(function(){
    // Cry self to sleep at night
});

当然,第二个例子有点愚蠢,您总是可以将id或类应用到表或td元素上,但这将增加语义值,这是表的支持者强烈反对的。