学习编写CSS布局可能很棘手,尤其是如果您熟悉使用表格来创建精美的网页布局。但是虽然HTML5允许表格进行布局,但这不是一个好主意。
表不可访问
就像搜索引擎一样,大多数屏幕阅读器按照它们在HTML中显示的顺序读取网页,并且表格对于屏幕阅读器来说非常难以解析。这是因为当从左到右和从上到下阅读时,表格布局中的内容虽然是线性的,但并不总是有意义的。另外,对于嵌套表格和表格单元格上的各种跨度,可能会使页面难以弄清楚。
这就是为什么HTML5规范建议针对布局表以及HTML 4.01禁止它的原因。可访问的网页允许更多人使用它们,并且是专业设计师的标志。
使用CSS,您可以将某个部分定义为属于页面左侧,但将其放在HTML中。然后屏幕阅读器和搜索引擎都将首先读取重要部分(内容),最后读取不太重要的部分(导航)。
表格很棘手
即使您使用Web编辑器创建表格,您的网页仍然会非常复杂且难以维护。除了最简单的网页设计之外,大多数布局表都需要使用大量的属性和嵌套表。
在你做这件事时,建立桌子看起来很简单,但一旦完成,你需要维护它。在线下六个月,可能不容易记住为什么嵌套表格或连续多少个单元格等等。更不用说,如果您将网页作为团队成员维护,则必须向每个人介绍这些表的工作方式,或者希望他们在需要进行更改时花费额外的时间。
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,您在构建表格布局方面的技能将越来越少。是的,客户通常不会告诉您构建网页应该使用的确切技术,但他们确实要求:
- 可访问的网页:屏幕阅读器可以查看的设计正在被许多国家和公司强制要求,每天都会发现可访问性越来越重要。
- 可维护的网页:他们可以随身携带的设计,即使你将来不打算维护它们。
- 灵活的设计:适用于多种浏览器,分辨率和设备的设计。
- 快速下载页面:速度变得越来越重要,甚至是SEO。
- 可打印的设计:打印时没有特殊脚本或额外页面的页面。
如果您无法满足客户的要求,他们将不再为您设计 - 期间。您是否真的能够让您的业务受损,因为您不愿意学习并采用自20世纪90年代末以来一直在使用的技术?
道德:学会使用CSS
CSS可能难以学习,但任何有价值的东西都值得付出努力。不要让你的技能停滞不前。学习CSS并按照构建方式构建网页 - 使用CSS进行布局。