小编典典

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

all

为什么?

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

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

也许我或我的开发人员必须维护一个网页关心… 是一个表更难维护吗?我认为使用表格比使用 div 和
CSS更容易。

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

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

  • SEO最好不要使用表格
    为什么?任何人都可以证明它是一些证据吗?或者来自谷歌的声明从 SEO 的角度来看不鼓励使用表格?

  • 表比较慢。
    必须插入一个额外的 tbody 元素。这是现代网络浏览器的小菜一碟。向我展示一些使用表格显着减慢页面速度的基准。

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

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


阅读 142

收藏
2022-03-03

共1个答案

小编典典

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

将内容与布局分开很好,但这是一个错误的论点;陈词滥调的思考。

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

所以呢?我的老板在乎吗?我的用户关心吗?

要看。你的老板是尖头发吗?那么他可能不在乎。如果她有能力,那么她会关心,因为用户

也许我或我的开发人员必须维护一个网页关心… 是一个表更难维护吗?我认为使用表格比使用 div 和 css 更容易。

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

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

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

代码的可读性我认为是相反的。大多数人了解html,很少了解css。它更简单。

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

SEO最好不要使用表格

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

表比较慢。必须插入一个额外的 tbody 元素。这是现代网络浏览器的小菜一碟。

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

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

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

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

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

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

2022-03-03