为什么不在 HTML 中使用表格进行布局? [英] Why not use tables for layout in HTML?

查看:35
本文介绍了为什么不在 HTML 中使用表格进行布局?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这似乎是一般意见 表格不应该用于 HTML 中的布局.

为什么?

我从来没有(或者说实话很少)看到对此有好的论据.通常的答案是:

  • 最好将内容与布局
    但这是一个错误的论点;陈词滥调.我想确实使用表格元素进行布局与表格数据几乎没有关系.所以呢?我的老板在乎吗?我的用户关心吗?

    也许我或我的开发人员必须维护网页关心...表格的可维护性较低吗?我认为使用表格比更容易使用 div 和 CSS.

    顺便说一句...为什么使用 div 或 span 不能很好地将内容与布局和表格分开?仅使用 div 获得良好的布局通常需要大量嵌套的 div.

  • 代码的可读性
    我认为正好相反.大多数人懂 HTML,很少人懂 CSS.

  • SEO 最好不要使用表格
    为什么?有人能拿出一些证据证明它是吗?或者 Google 声明从 SEO 的角度不鼓励使用表格?

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

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

我对使用 div + CSS 代替表格的好论据非常感兴趣.

解决方案

我将一个接一个地检查您的论点,并尝试显示其中的错误.

<块引用>

将内容与布局分开是件好事但这是一个错误的论点;陈词滥调.

这完全没有错,因为 HTML 是有意设计的.一个元素的滥用可能并非完全没有问题(毕竟,其他语言中也出现了新的习语),但必须抵消可能产生的负面影响.此外,即使今天没有反对滥用

元素的论据,但由于浏览器供应商对元素应用特殊处理的方式,明天可能会出现.毕竟,他们知道
元素仅用于表格数据",并且可能会利用这一事实来改进渲染引擎,在此过程中巧妙地改变
s 的行为,因此打破了以前被误用的情况.

<块引用>

那又怎样?我的老板在乎吗?我的用户关心吗?

视情况而定.你的老板是尖头吗?那么他可能不在乎.如果她有能力,那么她会关心,因为用户.

<块引用>

也许我或我的开发人员必须维护网页关心...表格的可维护性较低吗?我认为使用表格比使用 div 和 css 更容易.

大多数专业 Web 开发人员似乎反对您[需要引用].表实际上不易维护应该是显而易见的.使用表格进行布局意味着更改公司布局实际上意味着更改每一页.这可能非常昂贵.另一方面,明智地使用语义上有意义的 HTML 与 CSS 可能将此类更改限制在 CSS 和所使用的图片中.

<块引用>

顺便说一下……为什么使用 div 或 span 不能很好地将内容与布局和表格分开?仅使用 div 获得良好的布局通常需要大量嵌套的 div.

深度嵌套的

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

<块引用>

代码的可读性我认为情况正好相反.大多数人了解html,很少了解css.更简单.

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

<块引用>

SEO 最好不要使用表格

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

<块引用>

表格比较慢.必须插入额外的 tbody 元素.这对于现代网络浏览器来说简直是小菜一碟.

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

<块引用>

向我展示一些使用表格显着减慢页面速度的基准.

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

<块引用>

大多数需要升级的网站也需要新内容 (html).不太可能出现网站的新版本只需要一个新的 css 文件的情况.

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

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

It seems to be the general opinion that tables should not be used for layout in HTML.

Why?

I have never (or rarely to be honest) seen good arguments for this. The usual answers are:

  • 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.

  • Readability of the code
    I think it's the other way around. Most people understand HTML, few understand CSS.

  • 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?

  • 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.

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.

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

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.

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.

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.

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.

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.

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

"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.

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

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.

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.

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.

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆