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

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。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容