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


来源:网站优化外包 作者:坪山网络公司 日期:2019-01-24 浏览:

如果你做网站建设开发已经有很多年,比如说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进行布局。
深圳市圣玺网络技术有限公司提供坪山区域的营销网站建设、品牌网站设计、企业网站改版制作、网站优化外包、网络营销推广、百度霸屏、SEO按天按效果付费等互联网广告服务!
本文由网上采集发布,不代表本站立场,转载联系作者并注明出处:http://www.webgaiban.cn/wzyh/1735.html

X

截屏,微信识别二维码

微信号:15019448256

(点击微信号复制,添加好友)

  打开微信