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


当前回答

数据:使用表格。布局:使用样式。使用非常精简的浏览器(即没有样式,只有普通标记的Links 2或Lynx)可以最快地呈现表。

其他回答

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

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

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

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

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

我很抱歉我的英语不好,但还有一个原因:

我在一些政府机构工作,不使用TABLE的首要原因是残疾人。他们使用机器“翻译”网页。

问题是这个“翻译机器”不能阅读网站,如果它是由TABLE。为什么?因为TABLE是用于数据的。

事实上,如果你使用TABLES,你必须为每个cell指定一些信息,让残疾人知道他们在TABLE中的位置。想象一下,你有一个大表格,必须放大才能看到屏幕上的一个单元格:你必须知道你在哪一行/col。

因此,使用DIV,并且禁用可以简单地阅读文本,并且不会得到一些关于行/cols的奇怪信息,当它们不需要在那里时。

我也更喜欢TABLE来制作快速简单的模板,但我现在习惯了CSS…它很强大,但你真的必须知道你在做什么……:)

我想补充的是,基于div的布局更容易维护、发展和重构。只是在CSS中做了一些改变来重新排序元素,这就完成了。根据我的经验,重新设计使用表的布局是一场噩梦(如果有嵌套的表,则会更糟)。

从语义的角度来看,代码也有意义。

为了回应“表格更慢”的论点——你考虑的是渲染时间,这是一个错误的度量。通常情况下,开发人员会编写一个巨大的表格来完成页面的整个布局——这大大增加了要下载的页面的大小。不管你喜不喜欢,仍然有大量的拨号用户。

参见:过度使用ViewState