协慌网

登录 贡献 社区

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

人们普遍认为,不应在 HTML 中使用表格进行布局。

为什么?

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

  • 最好将内容与布局分开
    但这是一个谬误的论点。 陈词滥调思维。我想这是对的,使用 table 元素进行布局与表格数据关系不大。所以呢?我的老板在乎吗?我的用户在乎吗?

    也许是我或我的同伴开发人员,他们必须维护网页…… 表的维护性较差吗?我认为使用表格比使用 div 和 CSS 更容易。

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

  • 代码的可读性
    我认为这是另一回事。大多数人了解 HTML,很少人了解 CSS。

  • SEO 最好不要使用表格
    为什么?有人可以证明它是吗?还是 Google 的声明,即从 SEO 角度不鼓励使用表?

  • 桌子比较慢。
    必须插入一个额外的 tbody 元素。这是用于现代 Web 浏览器的花生。向我展示一些基准测试,在这些基准测试中使用表会大大降低页面速度。

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

我对使用 divs + CSS 而不是表的良好参数真的很感兴趣。

答案

我将一遍又一遍地研究您的论点,并尝试显示其中的错误。

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

它根本不是谬误的,因为 HTML 是故意设计的。元素的滥用可能不是完全没有问题的(毕竟,其他语言也已经开发出新的习语),但是可能的负面影响必须加以抵消。另外,即使<table>元素的论点,也可能由于浏览器供应商对该元素应用特殊对待的方式而出现。毕竟,他们知道 “ <table>元素仅用于表格数据”,并且可能会使用此事实来改进呈现引擎,在此过程中巧妙地更改了<table>的行为,从而打破了以前滥用它的情况。

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

依靠。你的老板尖尖吗?然后他可能不在乎。如果她有能力,那么她会在意的,因为用户

也许是我或我的同伴开发人员,他们必须维护网页…… 表的维护性较差吗?我认为使用表格比使用 div 和 CSS 更容易。

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

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

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

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

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

SEO 最好不要使用表格

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

桌子比较慢。必须插入一个额外的 tbody 元素。这是用于现代 Web 浏览器的花生。

多余的元素与表变慢无关。另一方面,表的布局算法要困难得多,浏览器通常必须等待整个表加载后才能开始对内容进行布局。此外,无法缓存布局(可以轻松缓存 CSS)。所有这些都已在前面提到过。

向我展示一些基准测试,在这些基准测试中使用表会大大降低页面速度。

不幸的是,我没有任何基准数据。我本人对此会很感兴趣,因为这种说法缺乏一定的科学严谨性是正确的。

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

一点也不。我曾研究过几种情况,其中通过将内容和设计分离而简化了设计更改。通常仍然需要更改一些 HTML 代码,但更改总是会局限得多。此外,有时必须动态进行设计更改。考虑模板引擎,例如 WordPress 博客系统使用的模板引擎。表布局实际上会杀死该系统。我曾为商业软件处理过类似案例。能够更改设计而不更改 HTML 代码是业务需求之一。

另一件事。表格布局使网站的自动解析(屏幕抓取)变得更加困难。这听起来很琐碎,因为毕竟是谁做的?我自己感到惊讶。如果有问题的服务没有提供 WebService 替代品来访问其数据,则屏幕抓取将有很大帮助。我正在从事生物信息学研究,这是一个可悲的现实。现代 Web 技术和 Web 服务尚未普及到大多数开发人员,并且通常,屏幕抓取是使获取数据过程自动化的唯一方法。难怪许多生物学家仍然手动执行此类任务。适用于数千个数据集。

这是我的程序员从类似线程得到的答案

语义学 101

首先看一下这段代码,然后思考这里出了什么问题...

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

当然,问题在于自行车不是汽车。对于自行车实例,汽车类是不合适的类。该代码没有错误,但是在语义上是不正确的。它对程序员的反映很差。

语义学 102

现在将此应用于文档标记。如果您的文档需要显示表格数据,那么适当的标签将是<table> 。但是,如果将导航放置到表中,那么您会滥用<table>元素的预期用途。在第二种情况下,您不是在显示表格数据,而是(错误地)使用<table>元素来实现表示性目标。

结论

访客会注意到吗?不,你的老板在乎吗?也许。我们有时会像程序员一样偷工减料吗?当然。但是我们应该吗?不。如果您使用语义标记,谁将从中受益?您 - 和您的专业声誉。现在去做正确的事。

明显的答案:请参阅CSS Zen Garden 。如果您告诉我您可以轻松地对基于表的布局执行相同操作(请记住 - HTML 不变),那么请务必使用表格进行布局。

其他两个重要的事情是可访问性和 SEO。

两者都关心按什么顺序显示信息。如果基于表的布局将导航放置在页面上第二个嵌套表的第二行的第三个单元格中,则无法轻松在页面顶部显示导航。

因此,您的答案是可维护性,可访问性和 SEO。

别偷懒即使学习起来有些困难,也要以正确和正确的方式做事。