div+css布局与table布局比较
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