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

就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,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 而不是表格的好论据真的很感兴趣。

    最佳答案

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

    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 服务尚未普及到大多数开发人员,通常,屏幕抓取是自动化获取数据过程的唯一方法。难怪许多生物学家仍然手动执行此类任务。对于数以千计的数据集。

    https://stackoverflow.com/questions/83073/

    相关文章:

    html - 为输入类型 ="file"按钮设置样式

    html - Zalgo 文本如何工作?

    html - HTML中id和name属性的区别

    html - 我可以使用 :before or :after pseudo-element on a

    javascript - 如何检测 JavaScript 是否被禁用?

    html - 使用 CSS 按比例调整图像大小?

    html - 如何在 pre 标签中换行?

    html - 默认情况下如何选择单选按钮?

    html - 从 IFrame 中删除边框

    html - 拉伸(stretch)和缩放 CSS 背景