为什么说在网页制作时应该避免将表格用于网页布局

2022-05-15    分类: 网站建设


如果你做网站建设开发已经有很多年,比如说2010年以前,一定知道当时的网页排版布局方式多半基于table方式,而不是现在的使用的div+css。显然,学习编写CSS布局会很棘手,特别是如果您熟悉使用表格来创建精美的Web页面布局的话。可是,虽然HTML5允许表格进行布局,但这并不是一个好建议,为什么说在网页制作时应该避免将表格用于网页布局?无论从网页加载速度,还是搜索引擎收录,亦或者网页的排版局部开发效率等,我们均不建议使用老旧的table样式。
table嵌套加载缓慢
就像搜索引擎一样,大多数屏幕阅读器按照网页在HTML中的显示顺序阅读网页,而表格对于屏幕阅读器来说可能很难解析。这是因为表格布局中的内容虽然是线性的,但在从左到右和从上到下阅读时并不总是有意义的。另外,使用嵌套的表格,以及表格单元格上的不同跨度,可能会使页面变得非常难以理解。这就是HTML5规范不建议使用表进行布局的原因,也是HTML4.01不允许这样做的原因。可访问的网页允许更多的人使用它们,并且是专业设计师的标志。使用CSS,您可以将一个部分定义为属于页面的左侧,但将其放在HTML中的最后一个位置。然后,屏幕阅读器和搜索引擎都将首先读取重要部分(内容),然后再阅读不太重要的部分(导航)。
table布局很麻烦
即使您使用Web编辑器创建表格,您的网页仍将非常复杂且难以维护。除了最简单的网页设计之外,大多数布局表格都需要使用大量的AND属性和嵌套表。构建表格看起来似乎很容易,但一旦完成,您就需要维护它。六个月后,可能不太容易记住为什么嵌套表或一行中有多少个单元格,以此类推。更不用说,如果您作为一个团队成员维护Web页面,您必须向每个参与的人解释这些表是如何工作的,或者希望他们在需要进行更改时花费更多的时间。
CSS也可能很复杂,但它将表示从HTML中分离出来,并使其更易于长期维护。此外,使用CSS布局,您可以编写一个CSS文件,并设置所有页面的样式以使其看起来像这样。然后,当您想要更改站点的布局时,只需更改一个CSS文件,整个站点就会发生变化-不再一次检查每个页面来更新表以更新布局。
table布局不灵活
虽然可以创建具有百分比宽度的表布局,但它们的加载速度通常较慢,并且可能会显著改变布局的外观。但是,如果您对表使用指定的宽度,则最终会出现一个非常僵硬的布局,在与您自己的大小不同的监视器上看起来不会很好。创建在许多显示器、浏览器和分辨率上看起来很好的灵活布局相对容易。事实上,使用CSS媒体查询,您可以为不同大小的屏幕创建单独的设计。
对于相同的设计,嵌套表的加载速度比CSS慢。创建带有表的花哨布局的最常见方法是“嵌套”表。这意味着一个(或多个)表被放在另一个表中。嵌套的表越多,Web浏览器呈现页面所需的时间就越长。
在大多数情况下,表格布局使用比CSS设计更多的字符来创建。更少的字符意味着更少的下载。
table布局会影响搜索引擎的优化
最常见的表格创建布局在页面左侧有导航栏,在右侧有主要内容。在使用表时,这(通常)要求HTML中显示的第一个内容是左侧导航栏。搜索引擎根据内容对页面进行分类,许多引擎确定显示在页面顶部的内容比其他内容更重要。因此,首先使用左侧导航的页面所包含的内容看起来并不像导航那么重要。使用CSS,您可以将重要内容放在HTML中,然后使用CSS确定其在设计中的位置。这意味着搜索引擎将首先看到重要的内容,即使设计将其放在页面的下方。
table布局并不总是能很好地打印
许多表格设计不能很好地打印,因为它们对打印机来说太宽了。因此,为了使它们适合,浏览器将剪除表格,并打印下面的部分,从而导致非常不连贯的页面。有时你得到的页面看起来还不错,但整个右边都不见了。其他页面将在不同的纸张上打印部分。
使用CSS,您可以创建一个单独的样式表,仅用于打印页面。
用于布局的table在HTML 4.01中无效
HTML4规范指出:“表不应该仅仅用作布局文档内容的一种方式,因为这在呈现到非可视媒体时可能会出现问题。”因此,如果要编写有效的HTML4.01,则不能使用表进行布局。您应该只对表格数据使用表格,表格数据通常看起来像您可能在电子表格或数据库中显示的内容。但是,HTML5更改了规则,现在用于布局的表虽然不推荐,但现在被认为是有效的HTML。HTML5规范规定:“表不应用作布局辅助工具。”这是因为屏幕阅读器很难区分用于布局的表格,如前所述。使用CSS来定位和布局页面是获得用于创建表的设计的唯一有效的HTML4.01方法,HTML5也强烈建议使用这种方法。
用于布局的表格可能会影响您的工作前景
随着越来越多的新设计师学习HTML和CSS,您在构建表布局方面的技能将越来越少。是的,的确,客户通常不会告诉您应该使用哪种技术来构建他们的网页,但他们确实会提出以下要求:
  • 可访问性网页:许多国家和公司要求可供屏幕阅读器查看的设计越来越重要。
  • 可维护的网页:即使你将来不打算维护它们,它们也可以随身携带设计。
  • 灵活的设计:适用于多种浏览器、分辨率和设备的设计。
  • 快速下载页面:速度变得越来越重要,甚至对搜索引擎优化(SEO)也是如此。
  • 可打印设计:打印时没有特殊脚本或额外页面的页面。
如果你不能满足客户的要求,他们就不会再来找你设计了-到此为止。你真的能承担得起让你的企业遭受损失,因为你不愿意学习和采用一种自上世纪90年代末以来就一直在使用的技术吗?CSS可能很难学习,但任何值得付出的努力都是值得的。不要让你的技能停滞不前。学习CSS,并按照构建网页的方式构建网页-使用CSS进行布局。

新闻名称:为什么说在网页制作时应该避免将表格用于网页布局
地址分享:https://www.cdcxhl.com/news9/153459.html

成都网站建设公司_创新互联,为您提供虚拟主机电子商务微信小程序品牌网站建设自适应网站网站设计

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都定制网站建设