为什么不在HTML中使用表格布局呢?

在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方面的创新。

许多人提出了解决方案，使创建布局的divs更容易。最流行的是网格架构。有基于此体系结构的动态布局生成器。查看: 1) 960。Gs和(http://grids.heroku.com/) 2)蓝图最近也是如此。

在架构和表格布局工具方面，我还没有看到太多创新。

我想说，撇开所有的理论，实际上布局与CSS和div更快。相反，在这个方向上的创新使它变得更容易。

2011-05-03 22:47:00

其他回答

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

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

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

“我的老板在乎吗?”

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

2008-09-17 13:26:08

如果你在这方面支持表格角度，找一个有表格的网站，然后给自己买一个屏幕阅读器——关掉屏幕阅读器，关掉你的显示器。

然后尝试一个不错的语义正确的div布局网站。

你会发现其中的不同。

如果表格中的数据是表格而不是为了布局页面，那么表格并不是邪恶的。

2008-09-17 15:25:42

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

2008-09-17 14:10:45

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

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

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

2008-09-17 13:29:08

下面是我的程序员在一个类似的帖子中给出的答案

语义101

首先看一下这段代码，想想哪里出了问题……

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

当然，问题在于自行车不是汽车。car类对于bike实例是不合适的类。代码没有错误，但是语义不正确。这对程序员的形象很不利。

语义102

现在将此应用于文档标记。如果您的文档需要显示表格数据，那么适当的标记将是<table>。但是，如果将导航放在表中，则滥用了<table>元素的预期用途。在第二种情况下，您没有表示表格数据—您(mis)使用<table>元素来实现表示目标。

结论

游客会注意到吗?不。你的老板在乎吗?也许吧。作为程序员，我们有时会偷工减料吗?当然。但是我们应该吗?不。如果使用语义标记，谁会受益?你，还有你的职业声誉。现在去做正确的事吧。

2008-09-17 14:03:51

为什么不在HTML中使用表格布局呢?

推荐文章

最新文章

标签