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


当前回答

我不得不用这两种方式来做网站,再加上第三种,可怕的“混合”布局,包括表格、div和样式:div /CSS轻松胜出。

为了匹配一个表格单元格的代码权重,您必须立即嵌套三个深度的div。这种效果会随着嵌套表的增加而扩大。

我也更喜欢做一个布局变化,而不是一个变化,在我的网站的每一页。

我可以完全控制divs/css的各个方面。表格以一种可怕的方式把它搞得一团糟,尤其是在IE浏览器中,我从来没有选择不支持这个浏览器。

我维护或重新设计一个div /css网站的时间只是表格的一小部分。

最后,我可以用CSS和几乎任何脚本语言创新多种可切换的布局。这对我来说是不可能的。

在你做决定的时候,祝你的投资回报率好运。

其他回答

Flex有一个标签,用于在垂直列中布局内容。说实话,我不认为他们在布局/内容方面做得很好,但至少他们已经解决了这个问题。

像许多对CSS感到沮丧的人一样,我也到处寻找一个简单的答案,当我以为我找到了它时,我感到兴奋,然后当我在Chrome中打开页面时,我的希望破灭了。我肯定没有足够的技能说这是不可能的,但我还没有看到任何人提供样本代码供同行评审,明确地证明它可以可靠地完成。

那么,这个岛的CSS方面有人能推荐一种布局垂直列的心态/方法吗?我尝试过在第二行和第三行绝对定位,但我最终与到处重叠的东西和浮动有类似的问题,如果页面缩小。

如果这个问题有答案,我会欣喜若狂地做正确的事情——只要告诉我一些像“嘿,你试过**流:垂直|水平”这样的事情,我就完全不烦你了。

I have found that even with the best planning divs come up short in several respects. For instance. there is no way with divs to have a bottom bar that always sits at the bottom of the browser, even when the rest of the content does not go to the bottom of the browser. Also, you cannot elegantly do anything better than three columns, and you cannot have columns that grow and shrink according the the width of their content. In the end, we try to use divs first. However, we will not limit our html designs based on some religious content vs layout ideal.

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

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

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

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

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

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

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

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