html - 为什么不在 HTML 中使用表格进行布局？

Question

就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the help center为指导。




9年前关闭。










锁定。这个问题及其答案是locked因为这个问题是题外话，但具有历史意义。它目前不接受新的答案或互动。








好像是general opinion表格不应该用于 HTML 中的布局。

为什么？

我从来没有(或说实话很少)看到这方面的好论据。通常的答案是:

好到separate content from layout但这是一个错误的论点； Cliche Thinking .我想确实使用表格元素进行布局与表格数据几乎没有关系。所以呢？我的老板在乎吗？我的用户关心吗？也许我或我的开发人员必须维护网页关心...表格的可维护性较低吗？我认为使用表格是 easier比使用 div 和 CSS。顺便说一句......为什么使用 div 或 span 可以很好地将内容与布局和表格分开？仅使用 div 获得良好的布局通常需要大量嵌套的 div。

代码的可读性我认为恰恰相反。大多数人了解 HTML，很少有人了解 CSS。

SEO最好不要用表格为什么？有人能拿出一些证据证明它是吗？或者谷歌声明从 SEO 的 Angular 不鼓励使用表格？

表格较慢。必须插入额外的 tbody 元素。这是现代网络浏览器的花生。向我展示一些基准测试，其中使用表格会显着减慢页面速度。

没有表格，布局检修更容易，请参阅 css Zen Garden .大多数需要升级的网站也需要新内容 (HTML)。不太可能出现网站的新版本只需要一个新的 CSS 文件的情况。 Zen Garden 是一个不错的网站，但有点理论化。更不用说它的misuse的CSS。

我对使用 divs + CSS 而不是表格的好论据真的很感兴趣。

Answer 1

我将一个接一个地审查你的论点，并试图指出其中的错误。

It's good to separate content from layout But this is a fallacious argument; Cliché Thinking.

这完全没有错，因为 HTML 是有意设计的。一个元素的滥用可能并非完全没有问题(毕竟，其他语言中也出现了新的习语)，但必须抵消可能产生的负面影响。此外，即使没有反对滥用 <table> 的论据。今天的元素，明天可能会有，因为浏览器供应商对元素应用特殊处理的方式。毕竟，他们知道“ <table>元素仅用于表格数据”，并且可能会利用这一事实来改进渲染引擎，在此过程中巧妙地改变了 <table> s 的行为，从而打破了以前被滥用的情况。

So what? Does my boss care? Do my users care?

依靠。你的老板是尖头吗？那么他可能不在乎。如果她有能力，那么她会关心，因为用户 will .

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.

大多数专业 Web 开发人员似乎都反对您 [需要引用]。表实际上不易维护应该是显而易见的。使用表格进行布局意味着更改公司布局实际上意味着更改每一页。这可能非常昂贵。另一方面，明智地将语义上有意义的 HTML 与 CSS 结合使用可能会将此类更改限制在 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.

深度嵌套 <div> s 是一种反模式，就像表格布局一样。优秀的网页设计师不需要很多。另一方面，即使是这种嵌套很深的 div 也不会有很多表格布局的问题。事实上，它们甚至可以通过逻辑地将内容分成几部分来形成语义结构。

Readability of the code I think it's the other way around. Most people understand html, little understand css. It's simpler.

“大多数人”并不重要。专业人士很重要。对于专业人士来说，表格布局比 HTML + CSS 产生的问题更多。这就像说我不应该使用 GVim 或 Emacs，因为记事本对大多数人来说更简单。或者我不应该使用 LaTeX，因为 MS Word 对大多数人来说更简单。

It's better for SEO not to use tables

我不知道这是否属实，也不会将此用作论据，但这是合乎逻辑的。搜索引擎搜索相关数据。虽然表格数据当然可能是相关的，但用户搜索的内容很少。用户搜索页面标题或类似显着位置中使用的术语。因此，将表格内容排除在过滤之外是合乎逻辑的，从而大大减少处理时间(和成本!)。

Tables are slower. An extra tbody element has to be inserted. This is peanuts for modern web browsers.

额外的元素与表格变慢无关。另一方面，表格的布局算法要困难得多，浏览器通常必须等待整个表格加载完毕才能开始布局内容。此外，布局的缓存将不起作用(CSS 可以轻松缓存)。这一切都在前面提到过。

Show me some benchmarks where the use of a table significantly slows down a page.

不幸的是，我没有任何基准数据。我自己也会对它感兴趣，因为这个论点缺乏一定的科学严谨性是对的。

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.

一点也不。我处理过几个案例，其中通过内容和设计的分离来简化设计的更改。通常仍然需要更改一些 HTML 代码，但更改将始终受到限制。此外，有时必须动态进行设计更改。考虑模板引擎，例如 WordPress 博客系统使用的模板引擎。表格布局真的会扼杀这个系统。我曾为商业软件处理过类似的案例。能够在不更改 HTML 代码的情况下更改设计是业务需求之一。

另一件事。表格布局使网站的自动解析(屏幕抓取)变得更加困难。这听起来可能微不足道，因为毕竟是谁做的？我自己也很惊讶。如果相关服务不提供 WebService 替代方案来访问其数据，则屏幕抓取会很有帮助。我在生物信息学工作，这是一个可悲的现实。现代 Web 技术和 Web 服务尚未普及到大多数开发人员，通常，屏幕抓取是自动化获取数据过程的唯一方法。难怪许多生物学家仍然手动执行此类任务。对于数以千计的数据集。