为什么您应该避免使用网页布局表格

CSS是构建网页设计的最佳方式

学习编写CSS布局可能会非常棘手,特别是如果您熟悉使用表格来创建奇特的网页布局。 但是,虽然HTML5允许表格布局,但这不是一个好主意。

表格无法访问

就像搜索引擎一样,大多数屏幕阅读器按照它们在HTML中显示的顺序阅读网页。 屏幕阅读器可能很难分析表格。 这是因为表格布局中的内容虽然是线性的,但在从左到右和从上到下阅读时并不总是有意义的。 另外,嵌套表格和表格单元格上的各种跨度可能会使页面非常难以理解。

这就是HTML5规范建议针对表格进行布局的原因,以及为什么HTML 4.01不允许。 可访问的网页允许更多人使用它们,并且是专业设计师的标志。

使用CSS,您可以将一个部分定义为属于页面的左侧,但将其最后放置在HTML中。 然后屏幕阅读器和搜索引擎都会先读取重要部分(内容),然后再读取重要部分(导航)。

表是棘手的

即使您使用网页编辑器创建表格,您的网页仍然非常复杂且难以维护。 除了最简单的网页设计之外,大多数布局表格都需要使用很多属性和嵌套表格。

在做这件事时建立桌子看起来很容易,但是你需要保持它。 六个月后,记住为什么嵌套表格或连续排列多少个单元格可能并不那么容易,等等。 另外,如果你作为团队成员维护网页,你必须向每个人解释这些表格是如何工作的,或者希望他们在需要进行修改时需要额外的时间。

CSS也可能很复杂,但它使得演示文稿与HTML分开,并且从长远来看更容易维护。 另外,通过CSS布局,您可以编写一个CSS文件,并按照这种方式设置所有页面的样式。 而当你想改变你的网站的布局时,你只需要改变一个CSS文件,整个网站就会改变 - 不再一次遍历每个页面来更新表格来更新布局。

表是不灵活的

虽然可以使用百分比宽度创建表格布局,但它们通常加载速度较慢,并且可能会显着改变布局的外观。 但是,如果您为表格使用指定的宽度,则最终得到的布局非常僵硬,在尺寸与您自己的大小不同的显示器上看起来不太好。

在许多显示器,浏览器和分辨率上创建灵活的布局很容易。 事实上,通过CSS媒体查询,您可以为不同大小的屏幕创建单独的设计。

对于相同设计,嵌套表格比CSS缓慢

使用表格创建花哨布局的最常见方法是“嵌套”表格。 这意味着一个(或多个)表格被放置在另一个表格内。 嵌套的表越多,Web浏览器呈现页面所用的时间就越长。

在大多数情况下,表格布局比CSS设计使用更多的字符来创建。 字符越少意味着下载次数越少。

表可能会损害搜索引擎优化

最常见的表格创建布局的页面左侧有一个导航栏,右侧有主要内容。 在使用表格时,这(通常)要求在HTML中显示的第一个内容是左侧导航栏。 搜索引擎根据内容对页面进行分类,许多引擎确定显示在页面顶部的内容比其他内容更重要。 因此,首先使用左侧导航的网页会显示内容不如导航重要。

使用CSS,您可以将重要内容放在HTML中,然后使用CSS确定它应该放置在设计中的位置。 这意味着即使设计将其放在页面上,搜索引擎也会首先看到重要内容。

表格不总是打印良好

许多桌子设计打印不好,因为打印机太宽。 所以,为了使它们合适,浏览器会关闭表格并打印下面的部分,从而导致非常不连贯的页面。 有时你会看到好看的页面,但整个右侧都不见了。 其他页面将打印各种页面上的部分。

使用CSS,您可以创建一个单独的样式表来打印页面。

布局表格在HTML 4.01中无效

HTML 4规范指出:“表格不应纯粹用作布局文档内容的手段,因为这可能会在渲染到非可视媒体时出现问题。”

所以,如果你想编写有效的HTML 4.01,你不能使用表格进行布局。 您应该只使用表格来表格数据。 表格数据通常看起来像您可能在电子表格或可能的数据库中显示的内容。

但HTML5改变了规则,现在用于布局的表格虽然不被推荐,但现在是有效的HTML。 HTML5规范声明:“表不应该用作布局帮助。”

正如我上面提到的,因为布局表格难以让屏幕阅读器区分。

使用CSS来定位和布局页面是唯一有效的HTML 4.01方法,可用于获取用于使用表格创建的设计。 HTML5也强烈推荐这种方法。

布局表可能会影响您的工作前景

随着越来越多的新设计师学习HTML和CSS,你在构建表格布局方面的技能将越来越少。 是的,客户通常不会告诉您应该使用确切的技术来构建他们的网页。 但他们确实会问你这样的事情:

如果你不能提供客户要求的东西,他们会停止向你寻求设计,可能不是今天,但可能在明年或者一年之后。 你真的能够承受让你的业务遭受损失吗?因为你不愿意开始学习自20世纪90年代末以来一直在使用的技术?

道德:学会使用CSS

CSS可能很难学,但值得付出的努力值得。 不要让自己的技能停滞不前。 学习CSS并按照他们的意图构建您的网页 - 使用CSS进行布局。