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

如果你做网站建设开发已经有很多年，比如说2010年以前，一定知道当时的网页排版布局方式多半基于table方式，而不是现在的使用的div+css。显然，学习编写CSS布局会很棘手，特别是如果您熟悉使用表格来创建精美的Web页面布局的话。可是，虽然HTML5允许表格进行布局，但这并不是一个好建议，为什么说在网页制作时应该避免将表格用于网页布局？无论从网页加载速度，还是搜索引擎收录，亦或者网页的排版局部开发效率等，我们均不建议使用老旧的table样式。

就像搜索引擎一样，大多数屏幕阅读器按照网页在HTML中的显示顺序阅读网页，而表格对于屏幕阅读器来说可能很难解析。这是因为表格布局中的内容虽然是线性的，但在从左到右和从上到下阅读时并不总是有意义的。另外，使用嵌套的表格，以及表格单元格上的不同跨度，可能会使页面变得非常难以理解。这就是HTML5规范不建议使用表进行布局的原因，也是HTML4.01不允许这样做的原因。可访问的网页允许更多的人使用它们，并且是专业设计师的标志。使用CSS，您可以将一个部分定义为属于页面的左侧，但将其放在HTML中的最后一个位置。然后，屏幕阅读器和搜索引擎都将首先读取重要部分(内容)，然后再阅读不太重要的部分(导航)。

即使您使用Web编辑器创建表格，您的网页仍将非常复杂且难以维护。除了最简单的网页设计之外，大多数布局表格都需要使用大量的AND属性和嵌套表。构建表格看起来似乎很容易，但一旦完成，您就需要维护它。六个月后，可能不太容易记住为什么嵌套表或一行中有多少个单元格，以此类推。更不用说，如果您作为一个团队成员维护Web页面，您必须向每个参与的人解释这些表是如何工作的，或者希望他们在需要进行更改时花费更多的时间。

CSS也可能很复杂，但它将表示从HTML中分离出来，并使其更易于长期维护。此外，使用CSS布局，您可以编写一个CSS文件，并设置所有页面的样式以使其看起来像这样。然后，当您想要更改站点的布局时，只需更改一个CSS文件，整个站点就会发生变化-不再一次检查每个页面来更新表以更新布局。

虽然可以创建具有百分比宽度的表布局，但它们的加载速度通常较慢，并且可能会显著改变布局的外观。但是，如果您对表使用指定的宽度，则最终会出现一个非常僵硬的布局，在与您自己的大小不同的监视器上看起来不会很好。创建在许多显示器、浏览器和分辨率上看起来很好的灵活布局相对容易。事实上，使用CSS媒体查询，您可以为不同大小的屏幕创建单独的设计。

对于相同的设计，嵌套表的加载速度比CSS慢。创建带有表的花哨布局的最常见方法是“嵌套”表。这意味着一个(或多个)表被放在另一个表中。嵌套的表越多，Web浏览器呈现页面所需的时间就越长。

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

最常见的表格创建布局在页面左侧有导航栏，在右侧有主要内容。在使用表时，这(通常)要求HTML中显示的第一个内容是左侧导航栏。搜索引擎根据内容对页面进行分类，许多引擎确定显示在页面顶部的内容比其他内容更重要。因此，首先使用左侧导航的页面所包含的内容看起来并不像导航那么重要。使用CSS，您可以将重要内容放在HTML中，然后使用CSS确定其在设计中的位置。这意味着搜索引擎将首先看到重要的内容，即使设计将其放在页面的下方。