为什么不在HTML中使用表格布局？ [英] Why not use tables for layout in HTML?
问题描述
It seems to be the general opinion that tables should not be used for layout in HTML.
为什么？
我从来没有（或很少诚实）通常的答案是：
I have never (or rarely to be honest) seen good arguments for this. The usual answers are:
-
从布局中分离内容
但这是一个荒谬的论点; 哲学思考。我想这是真的，使用表格元素的布局与表格数据没有什么关系。所以呢？我的老板在乎吗？我的用户关心吗？
也许我或我的同事开发者必须维护一个网页管理...一个表不可维护？我认为使用表格比更容易使用divs和CSS。
顺便问一下...为什么使用div或span来从布局和表格中分离内容？只有div的良好布局通常需要很多嵌套的div。
It's good to separate content from layout
But 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.
代码的可读性
我认为这是另一回事。大多数人都理解HTML，很少了解CSS。
Readability of the code
I think it's the other way around. Most people understand HTML, few understand CSS.
SEO不使用表格更好
为什么？任何人都可以显示一些证据吗？或者Google的一个声明，表示不赞成SEO的观点？
It's better for SEO not to use tables
Why? Can anybody show some evidence that it is? Or a statement from Google that tables are discouraged from an SEO perspective?
表格比较慢。
必须插入一个额外的tbody元素。这是现代网络浏览器的花生。
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.
布局检修更容易没有表格，请参阅 css Zen Garden 。
大多数需要升级的网站都需要新内容（HTML）。新版本的网站只需要一个新的CSS文件的情况不太可能。禅花园是一个很好的网站，但有点理论。更不用说它对CSS的滥用。
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而不是表格的好参数感兴趣。
I am really interested in good arguments to use divs + CSS instead of tables.
推荐答案
我将逐个通过你的参数，并尝试显示它们中的错误。
I'm going to go through your arguments one after another and try to show the errors in them.
将内容与布局分开是很好的
但这是一个荒谬的论点; Cliché思维。
It's good to separate content from layout But this is a fallacious argument; Cliché Thinking.
这并不是谬误，因为HTML是故意设计的。滥用一个元素可能不是完全没有问题的（毕竟，新的成语也在其他语言中发展起来），但是可能的负面影响必须被抵消。此外，即使今天没有反对误用< table> 元素的论据，也许有明天，因为浏览器供应商对元素应用特殊处理的方式。毕竟，他们知道< table> 元素仅用于表格数据，并且可能使用此事实来改进渲染引擎，在此过程中细微改变<$
It's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that "<table> elements are for tabular data only" and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
So what? Does my boss care? Do my users care?
取决于。你的老板是尖尖的吗？然后他可能不在乎。如果她能胜任，那么她会关心，因为用户将。
Depends. Is your boss pointy-haired? Then he might not care. If she's competent, then she will care, because the users will.
也许我或我的同事开发人员必须维护一个网页管理...一个表不可维护？我认为使用表比使用div和css更容易。
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和使用的图片。
The majority of professional web developers seem to oppose you[citation needed]. That tables are in fact less maintainable should be obvious. Using tables for layout means that changing the corporate layout will in fact mean changing every single page. This can be very expensive. On the other hand, judicious use of semantically meaningful HTML combined with CSS might confine such changes to the CSS and the pictures used.
顺便说一下...为什么使用div或跨度良好的内容从布局和表分离？只有div的布局通常需要很多嵌套的div。
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& 是一个反模式，就像表格布局一样。好的网页设计师不需要很多。另一方面，即使这样的深层嵌套的div也没有很多表布局的问题。事实上，他们甚至可以通过逻辑上分割部分内容来贡献语义结构。
Deeply nested <div>s are an anti-pattern just as table layouts. Good web designers don't need many of them. On the other hand, even such deep-nested divs don't have many of the problems of table layouts. In fact, they can even contribute to a semantic structure by logically dividing the content in parts.
代码的可读性
认为这是另一回事。大多数人都理解html，很少理解css。更简单。
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对于大多数人来说更简单。
"Most people" don't matter. Professionals matter. For professionals, table layouts create many more problems than HTML + CSS. This is like saying I shouldn't use GVim or Emacs because Notepad is simpler for most people. Or that I shouldn't use LaTeX because MS Word is simpler for most people.
>
It's better for SEO not to use tables
我不知道这是否是真的，不会使用这个作为参数，但它是逻辑的。搜索引擎搜索相关数据。虽然表格数据当然可能是相关的，但很少是用户搜索。用户搜索在页面标题或类似的突出位置中使用的术语。因此，从过滤中排除表格内容是合乎逻辑的，从而以较大的因子减少处理时间（和成本！）。
I don't know if this is true and wouldn't use this as an argument but it would be logical. Search engines search for relevant data. While tabular data could of course be relevant, it's rarely what users search for. Users search for terms used in the page title or similarly prominent positions. It would therefore be logical to exclude tabular content from filtering and thus cutting the processing time (and costs!) by a large factor.
表是慢的。
必须插入一个额外的tbody元素。这是现代网络浏览器的花生。
Tables are slower. An extra tbody element has to be inserted. This is peanuts for modern web browsers.
额外的元素与表速度无关。另一方面，表的布局算法要困难得多，浏览器经常必须等待整个表加载，才能开始布局内容。此外，布局的缓存将不起作用（CSS可以轻松地缓存）。所有这一切已经提到过。
The extra element has got nothing to do with tables being slower. On the other hand, the layout algorithm for tables is much harder, the browser often has to wait for the whole table to load before it can begin to layout the content. Additionally, caching of the layout won't work (CSS can easily be cached). All this has been mentioned before.
显示一些基准，其中使用表格会大大减慢页面。
Show me some benchmarks where the use of a table significantly slows down a page.
不幸的是，我没有任何基准数据。我会对自己感兴趣，因为这是正确的，这个论点缺乏一定的科学严谨性。
Unfortunately, I don't have any benchmark data. I would be interested in it myself because it's right that this argument lacks a certain scientific rigour.
大多数需要升级的网站需要新的内容（html）。
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.
根本不需要新版本的网站只需要一个新的css文件。我曾经在几个案例中改变设计，简化了内容和设计的分离。通常仍然需要更改一些HTML代码，但是更改将始终受到更多限制。此外，有时必须动态地进行设计更改。考虑使用WordPress博客系统使用的模板引擎。表布局将逐字删除此系统。我已经为一个商业软件工作类似的情况。能够改变设计而不改变HTML代码是业务需求之一。
Not at all. I've worked on several cases where changing the design was simplified by a separation of content and design. It's often still necessary to change some HTML code but the changes will always be much more confined. Additionally, design changes must on occasion be made dynamically. Consider template engines such as the one used by the WordPress blogging system. Table layouts would literally kill this system. I've worked on a similar case for a commercial software. Being able to change the design without changing the HTML code was one of the business requirements.
另一件事。表格布局使得自动解析网站（屏幕抓取）更加困难。这可能听起来很琐碎，因为毕竟谁是谁？我自己感到惊讶。如果有问题的服务不提供WebService替代访问其数据，屏幕抓取可以帮助很多。我在生物信息学工作，这是一个悲伤的现实。现代网络技术和Web服务没有达到大多数开发人员，并且经常，屏幕刮擦是自动化获取数据的过程的唯一方法。难怪许多生物学家仍然手工执行这样的任务。数以千计的数据集。
Another thing. Table layout makes automated parsing of websites (screen scraping) much harder. This might sound trivial because, after all, who does it? I was surprised myself. Screen scraping can help a lot if the service in question doesn't offer a WebService alternative to access its data. I'm working in bioinformatics where this is a sad reality. Modern web techniques and WebServices have not reached most developers and often, screen scraping is the only way to automate the process of getting data. No wonder that many biologists still perform such tasks manually. For thousands of data sets.
这篇关于为什么不在HTML中使用表格布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
