在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加载从上到下的速度与数据到达的速度一样快,不管它是否已经完成。

其他回答

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

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

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

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

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

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

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

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

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

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

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

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

div和CSS的定位允许一个更灵活的设计,导致更容易修改和模板的网页。

也就是说,如果你对灵活性不感兴趣,那么使用一个表而不是一些由CSS变形成表的div绝对是更容易和更快的。我倾向于在设计时使用表格,只是为了更快地让它看起来正确。

布局的灵活性 想象一下,您正在创建一个带有大量缩略图的页面。 div: 如果你把每个缩略图放在DIV中,向左浮动,可能一行有10个缩略图。让窗口变窄,BAM -它是一行6个,或者2个,或者其他合适的。 表: 你必须明确地说一行中有多少单元格。如果窗口太窄,用户必须水平滚动。

可维护性 和上面的情况一样。现在要向第三行添加三个缩略图。 div: 把它们加进去。布局会自动调整。 表: 将新单元格粘贴到第三行。哦!现在那里的商品太多了。从那一行切一些,放在第四行。现在那里的商品太多了。从那一行切一些……(等) (当然,如果您使用服务器端脚本生成行和单元格,这可能不是问题。)