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


当前回答

This isn't really about whether 'divs are better than tables for layout'. Someone who understands CSS can duplicate any design using 'layout tables' pretty straightforwardly. The real win is using HTML elements for what they are there for. The reason you would not use tables for non-tablular data is the same reason you don't store integers as character strings - technology works much more easily when you use it for the purpose for which it is desgined. If it was ever necessary to use tables for layout (because of browser shortcomings in the early 1990s) it certainly isn't now.

其他回答

我曾经处理过一个包含6层嵌套表的网站,这个网站是由一些应用程序生成的,并且生成了无效的HTML,事实上,我花了3个小时的时间来纠正它,因为一个小的改变。

这当然是边缘情况,但是基于表的设计是不可维护的。如果你使用css,你分离了样式,所以在修复HTML时,你不必担心破坏。

同样,用JavaScript试试这个方法。将单个表单元格从一个位置移动到另一个表中的另一个位置。执行起来相当复杂,div/span只需要复制粘贴即可。

“我的老板在乎吗?”

如果我是你的老板。你会在乎的。,)如果你珍视你的生命。

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

根据508法规(对于视障屏幕阅读器),表格应该只用于保存数据,而不是用于布局,因为它会导致屏幕阅读器崩溃。至少别人是这么告诉我的。

如果您为每个div分配名称,您也可以使用CSS将它们一起蒙皮。只是让他们坐成你想要的样子有点麻烦。

内容和布局之间的分离也使它更容易为您的网站生成打印机友好的布局或不同的皮肤(样式),而不必创建不同的html文件。有些浏览器(如Firefox)甚至支持从视图菜单中选择样式表。

而且我确实认为保持无表格布局更容易。你不需要担心行span, colspan等等。您只需创建一些容器div并将内容放置在需要的位置。也就是说,我认为它也更有可读性(<div id="sidebar"> vs <tr><td>…</td><td>…<td>sidebar</td></tr>)。

这只是一个你必须学会的小“技巧”(一旦你掌握了这个技巧,我认为它会更容易,更有意义)。

508符合性-屏幕阅读器能够理解你的标记。 等待呈现——直到</table>元素结束,表格才会在浏览器中呈现。