div+css布局与table布局比较

一、背景介绍

table布局是网页早期布局实现的主要手段，当时的网页构成，相对也比较简单，多是以文本

以及静态图片等组成的，类似于报纸的形式，分区分块显示，table标签的结构表现恰好可以

满足这样的要求。但是随着网页要求的提高和技术的不断探索更迭，尤其是W3C（万维网联

盟）及其他标准组织制定的标准出台后，明确了table标签不是布局工具，使table标签重新回

到其原有的作用上（即仅作为呈现表格化数据的作用），而提倡使用div+css的布局组合。

二、知识剖析

2.1使用table布局的特点

优点:

1、对于新手而言，容易上手，尤其对于一些布局中规中矩的网页，更让人首先想到excel，进而通过使用table去实现它。

2、表现上更加“严谨”，在不同浏览器中都能得到很好的兼容

3、通过复杂的表格套表格的形式，也可以实现比较复杂的布局需求。布置好表格，然后将内容放进去就可以了。

4、它可以不用顾及垂直居中的问题。

5、数据化的存放更合理。

缺点:

1、标签结构多，复杂，在表格布局中，主要是用到表格的相互嵌套使用，这样就会造成代码的复杂度更高！

2、表格布局，不利于搜索引擎抓取信息，直接影响到网站的排名

2.2使用div+css布局的特点

优点

1、符合W3C标准的，W3C标准提出网页由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2、布局更加灵活多样，能够通过样式选择来实现界面设计方面的更多要求。

3、布局改版方便，不需要过多地变动页面内容，通常只要更换相应的css样式就可以将网页变成另外一种风格展现出来。

4、布局可以让一些重要的链接和文字信息等优先让搜索引擎抓取，内容更便于搜索。

5、增加网页打开速度，增强用户体验。

缺点

1、开发技术高，要考虑兼容版本浏览器。目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。

2、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，

有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

2.3 div+css的布局较table布局的明显优势

1，其实也是div+css布局的第一个特点，table标签被严格地定义为存放数据的一个区域，而不是布局工具，它的布局形式不符合W3C标准，没有实现结构和表现的分离，它既有css的表现功能，也有html的结构功能。

2，table布局加载网页时，必须整体加载完，降低了网页的呈现速度，而div+css布局是边加载边显示的。

3，table布局在网页代码编写时，有时需要嵌套多重表格才能实现，但使用div+css布局，相对而言会减少许多嵌套时的代码，更容易检查和维护。

4，table布局不方便表现的更换，使用div+css布局，大多只要更改css样式表就能变化表现形式。

5、易于维护和改版。

三、常见问题

问题:如何在div+css布局中依然使用table布局中的一些功能？

四、解决方案

第一种，就是在div+css的布局中局部使用table布局（主要是纯表格数据的实现）。

第二种，是使用相关的默认样式表。如下代码对应表所示：

table { display: table }

tr { display: table-row }

thead { display: table-header-group }

tbody { display: table-row-group }

tfoot { display: table-footer-group }

col { display: table-column }

colgroup { display: table-column-group }

td, th { display: table-cell }

caption { display: table-caption }

五、参考文献

参考一:css中与table有关的布局

参考二：table和CSS+DIV排版模式的优缺点比较

参考三：详解DIV+CSS布局的好处和意义

参考四：Table布局的优缺点介绍及为什么不建议使用

参考五：主流网站为什么用div+css布局，而不用table