首页 > HTML > 为什么不使用表格进行 HTML 布局?

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

上一篇 下一篇

似乎普遍认为表格不应该用于HTML中的布局。

为什么?

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

  • 将内容与布局
    分开是件好事 但这是一个错误的论点;克利切思考。我想使用表格元素进行布局确实与表格数据无关。那又怎样?我的老板在乎吗?我的用户关心吗?
    也许我或我的开发人员同事必须维护网页关心……表是否不太可维护?我认为使用表格比使用 div 和 CSS 更容易。

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

  • 代码
    的可读性我认为是相反的。大多数人理解HTML,很少有人理解CSS。
  • SEO最好不要使用表格
    ,为什么?谁能拿出一些证据证明它是?还是谷歌的声明,从SEO的角度来看,不鼓励使用表格?
  • 表速度较慢。
    必须插入一个额外的主体元素。这是现代网络浏览器的花生。向我展示一些基准测试,其中使用表格会显着减慢页面速度。
  • 没有表格的布局大修更容易,请参阅 css 禅园。
    大多数需要升级的网站也需要新内容 (HTML)。新版本的网站只需要一个新的 CSS 文件的情况不太可能发生。Zen Garden是一个不错的网站,但有点理论化。更不用说它对CSS的滥用了。

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

分割线

网友回答:

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

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

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

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

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

也许我或我的开发人员同事必须维护网页关心……表是否不太可维护?我认为使用表格比使用 divs 和 css 更容易。

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

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

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

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

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

SEO最好不要使用表格

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

表速度较慢。
必须插入一个额外的主体元素。这是现代网络浏览器的花生。

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

向我展示一些基准测试,其中使用表格会显着减慢页面速度。

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

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

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

另一件事。表格布局使网站的自动解析(屏幕抓取)变得更加困难。这听起来可能微不足道,因为毕竟是谁做的?我自己也很惊讶。如果相关服务不提供访问其数据的 Web 服务替代方案,则屏幕抓取会有很大帮助。我正在从事生物信息学工作,这是一个可悲的现实。现代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禅园。如果你告诉我你可以轻松地使用基于表格的布局做同样的事情(记住 – HTML 不会改变),那么一定要使用表格进行布局。

另外两个重要的事情是可访问性和SEO。

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

所以你的答案是可维护性,可访问性和SEO。

不要偷懒。以正确和正确的方式做事,即使它们有点难学。

模板简介:该模板名称为【为什么不使用表格进行 HTML 布局?】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 321次
  • 使用软件 Sublime/Dreamweaver/HBuilder
  • 文件格式 编程语言
  • 文件大小 暂无信息
  • 上传时间 04-13
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
响应式 单页式简历模板 微信图片 微信公众平台 微信素材 自适应 微信模板 企业网站 微信文章 html5
您可能会喜欢的其他模板