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


当前回答

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

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

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

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

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

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

其他回答

我尽量避免使用TABLEs,但是当我们设计复杂的表单,混合了多种控件类型和不同的标题位置,并对分组进行了非常严格的控制时,使用DIVs是不可靠的,甚至几乎是不可能的。

现在,我不会说这些表单不能重新设计以更好地适应基于DIV的布局,但是对于其中的一些表单,我们的客户坚决不改变以前版本(用经典ASP编写的)的现有布局,因为它与用户熟悉的纸质表单相似。

因为表单的表示是动态的(其中某些部分的显示是基于案例的状态或用户的权限),所以我们使用一组堆叠的div,每个div包含一个由逻辑分组的表单元素组成的TABLE。TABLE的每一列都被分类,这样CSS就可以控制它们。这样,我们就可以关闭表单的不同部分,而不会出现在div中不是表来换行的问题。

根据过去的经验,我必须选择DIV。即使在OOP中,主要目的也是减少对象之间的耦合,因此这个概念可以应用于DIVS和表。表用于保存数据,而不是围绕页面排列数据。DIV是专门设计用于在页面周围排列项目的,因此设计应该使用DIV,表应该用于存储数据。

此外,编辑由表格组成的网站是非常困难的(在我看来)

对于为了简单或临时的东西而拼凑在一起的HTML,表很有用。如果你正在构建一个大型网站,你应该使用div和CSS,因为随着时间的推移,随着网站的变化,它将更容易维护。

当我使用CSS设计我的布局时,我通常给每个主要部分都有自己的根(主体级别)div,并使用相对/绝对定位将其置于适当的位置。这比表更灵活一些,因为我不局限于可以用行和列表示的排列。

此外,如果我决定我想要重新安排布局(说我想要导航栏现在在右边),我可以简单地去改变一个地方(CSS文件)的元素位置,HTML不需要改变。如果我对表执行此操作,我将不得不进入并找到信息,并进行大量属性修改和复制粘贴以获得相同的效果。

事实上,使用CSS,我甚至可以让我的用户选择他们想要的布局如何工作。只要内容区域的一般大小不改变,我完全可以使用一些PHP脚本来根据用户的偏好输出CSS,并允许他们根据自己的喜好重新排列站点。同样,对于表也是可以的,但是维护起来要困难得多。

最后,CSS提供了一个表永远无法提供的主要好处:基于显示设备重新格式化内容的能力。CSS允许我在打印机上使用与显示器上完全不同的样式集(包括位置、格式等)。这也可以扩展到其他媒体,一个很好的例子是Opera Show,它允许一个设计巧妙(非常标准)的CSS增强页面被视为幻灯片显示。

因此,最终,灵活性和管理才是真正的赢家。一般来说,CSS允许你对布局做更多的事情。基于表的布局在技术上没有什么不标准的,但为什么要限制自己呢?

看这个重复的问题。

你忘记的一项是可访问性。例如,如果你需要使用屏幕阅读器,基于表格的布局就不能很好地转换。如果您使用政府,则可能需要支持可访问的浏览器,如屏幕阅读器。

我也认为你低估了你在问题中提到的一些事情的影响。例如,如果您既是设计人员又是程序员,您可能没有充分了解它如何将表示和内容分开。但一旦你进入一个商店,他们是两个不同的角色,优势就开始变得清晰起来。

如果你知道你在做什么并且有好的工具,CSS在布局方面确实比表格有显著的优势。虽然每一件物品本身都不能证明放弃餐桌是合理的,但总的来说还是值得的。