发表于： 2017-03-02 19:38:37

div+css的布局较table布局有什么优点?

css-06-divAndTable

1.背景介绍

导语：在90年代，网页初期形式出现，主要的模式为文本，由图片组成，同时，容量较小，在布局上没有任何要求，尤其是标题和段落十分不明确。但是，随着社会的发展，表格布局形式出现，发展为flash动画，发展至今，成为CSS为基础的网页设计形式。对于前端页面重构技术，经历了不同寻常的发展历程：table布局页面--DIV+CSS--HTML5+CSS3，其中最重要的Web前端的灵魂无遗是JavaScript，针对不知道的浏览器和平台，Web前端不再局限于简单、反复的工作范畴。

从table布局到div+css布局...发生了什么？

早先在1999年的时候，CSS是早已诞生的，但并没有多少人使用，最初的 Web 像一个在线版的文档，并没有成为现在这样的平台，不需要过多过多地考虑布局问题，随着互联网第一次泡沫的形成，涌现出大量的门户网站，门户网站是 Table 布局的始作俑者，因为他们的首页比一整份报纸的所有版面拼接在一起还复杂，Table 在这方面十分顺手，结合 colspan 和 rolspan，你几乎能够实现任何复杂的版面。

这种布局风格在2000年代初，一直到中期仍然十分流行，尤其国内，在大为美的潜意识下，人们把所有能塞到一个页面的东西都塞进了首页，Table 就像一个旧时代的管家，把所有东西虽不能井井有序，但至少是一样不少地编排起来。然而这样的 Web 终于到了让人厌恶的地步，随着搜索，RSS 订阅，以及以博客为代表的个性化 Web 的出现，人们有更多渠道获得信息，而不必去访问那几个让人几乎要晕过去的门户的首页，于是出现了一种清新的，轻量的 Web 风，使用更简单的布局，更明快的配色，大图标，大 Banner，以及更容易阅读的大字体，同时，在这个时候，CSS 已经非常成熟，而 Firefox, Opera, Safari 为代表的浏览器，在遵守 W3C 标准方面要远远好过 IE，人们终于认识到 CSS 的威力。因为 CSS 在布局上，其核心是一个 Box 模型，人们必须为 CSS 找一个可以依附的容器对象。

Div 成为幸运者一方面因为它天生就是 Box 的最佳原型，在语义上，Div 代表页面的一个区域，在外形上，它四四方方，更重要的是，它不像 <P> 或 <a> 那样事先已经被赋予特殊的语义（虽然它们也能用于 Box 模型）；另一方面，则出于人们对 Table 统治一个臃肿时代的憎恶，一个时代的结束，继任者都会努力抹去旧时代的痕迹，那些旧时代的象征或代表的命运多半如此，人们并不是简单地忘却它们，而是断然划清界限。

Table 的一切不公平待遇就此开始。为什么说不公平，W3C 不建议 Table 布局的时候，只说应使用 CSS 代替，这是什么意思，Table 不支持 CSS 吗？当然支持，而且，由于 Table 作为老牌的 HTML 对象，它的地位曾如此重要，任何浏览器都对 Table 提供了最完美的支持，包括 CSS 支持。当人们拥抱 Div 的时候，似乎忘记了 Table 也是 Box，而且是一个拥有多个内格的 Box，Table 作为一个整体，和 Div 在 Box 模型方面没有任何区别，而它的内格，除了 Margin 之外，仍然是一个 Box，内格不含 Margin 概念这是应该理解的。Div 很优秀这不必说，然而当人们说 Div + CSS 的时候，似乎暗示着 Table 无法 CSS，这是天大的误会。

　　Div 支持的所有 CSS 属性，Table 全部支持，事实上，在 Div 大红大紫之前，那些 Div 的早期采用者曾信心不足地表示，Table 能做到，Div 都能，而他们也为自己的话付出了代价，企图在 Div 中实现垂直居中的人明白我的意思，企图在 IE6 中不经 CSS Hack 而实现 100% Div 布局的人更明白我的意思。100% Height 问题，几个 Div 之间的宽度自适应问题，相信任何从事 Div + CSS 设计的人会遇到。Table 在这方面的优势并不是因为它本身多么优秀，而是因为它老牌，没有浏览器敢忽视，也因为它的特性原本如此，人们发明表格，是因为希望数据显示得整齐，就这么简单。

2.知识剖析

2.1TABLE布局是什么

TABLE布局是web早期兴起的一种布局方式。

w3c对<table>标签的定义是：表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

但是！由于table自带的一些垂直居中、划分区域等等的特性，在早期很流行用table来布局，就像最开始背景介绍里提到的门户网站，table带来的特性对他们而言实在太方便了，只需要将网页中的各个元素按照版式划分好以后，往里面填东西就可以了。

2.2DIV+CSS布局是什么

DIV（division，区分）是HTML的一个标签，具有容器的特性，可以将HTML分割成不同的区块，并且可以将文本、图片、链接等其他的HTML标签放在div容器中，但是如果使用div时，不结合CSS，它就跟其他的标签一样，无法实现布局效果。

CSS（CascADIng style Sheets，层叠样式表）是用来定义网页的外观显示，于1996年正式推出，在网页中使用CSS样式可以对网页内容的显示进行精确控制。

DIV+CSS布局中，DIV用于搭建网站框架、CSS用于创建网站样式，实质是对网站进行标准化重构，使用CSS将表现与内容分离。一般分为三个步骤：1.根据网页的设计效果图分析页面的具体结构，形成div布局结构；2.往各个div块里插入相应的内容；3.编写每个div块的CSS控制定位。（是不是很熟悉？）

2.3div+css布局相对于table布局的优势

1.网页结构和网页展示形式的分离，使得网页结构简洁清晰，浏览器显示速度加快；

特性决定性能。因为DIV+CSS页面是HTML和CSS文件分开的，而浏览器打开该页面的时候是同时下载HTML和CSS，所以可以提高网页打开速度。TABLE 布局中大量样式设计代码混杂在表格、单元格中，使得可读性大大降低，表格中到处留下设计的足迹，生成的网页代码除了表格本身的代码，还有许多无意义的透明gif占位图及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。

2.简化网站更新代码，不用再一页一页更新，只用更新外部的CSS文件即可；

3.大大简化页面代码，有利于数据调用分析，更容易被搜索引擎搜索；

4.使得整个网站显示风格保持一致，用户体验更好；

TABLE布局还有个特性就是浏览器打开的时候必须是浏览器下载以<table>开始，并以</table>结束后，才开始显示块的内容，而DIV的HTML是边加载边显示，因此增加了用户体验。

5.更加语义化，且支持浏览器的向后兼容。

div+css符合W3C标准。是专门用来作为容器的，更好的展示了盒子模型。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

3.常见问题

DIV+CSS OR TABLE ？

It’s a question...

4.解决方案

首先，让我们回想一下之前讲到的DIV+CSS布局的优势...

1.网页结构和网页展示形式的分离，使得网页结构简洁清晰，浏览器显示速度加快：

现下电脑配置都不错，且网络速度越来越快，所以现在的网络环境下来说，table布局和div+css布局在页面渲染上的速度差别并不是很明显了。

2.简化网站更新代码，不用再一页一页更新，只用更新外部的CSS文件即可；

统一使用一个css文件，的确可以实现修改一次，全站修改的效果，这样使得维护的成本更低，但是换一个角度想，如果所有页面在加载的时候都要访问一个文件，那这个文件每天的下载量，特别是在搜狐、新浪等网站平台上将达到几亿次，这就需要后面有很多台前端web服务器做支撑，后台的成本无形中也提高了很多，如果后台支撑没做好，页面会出现花屏，之前的工作也白费了，很多人说这样的几率太小了，但是意外发生了对门户后果将非常严重。

3.大大简化页面代码，有利于数据调用分析，更容易被搜索引擎搜索；

这个目前并没有很明确的数据支持，而且在中国以百度为垄断的网络环境下，这个是可以忽略的，百度现在完全是人工排序啊，不然莆田系是怎么出来的？

4.语义化： table布局不一定要用table，也可以用display：table、display：table-row等等来实现。

总而言之，TABLE和DIV+CSS是目前网页设计布局中的两种方式，各有优劣，不能片面的认为DIV+CSS将取代TABLE布局，也并不是说DIV布局方式不好，而是应该正确看待TABLE在以内容为基础的大型门户中也有很大的作用。DIV+CSS布局作为制作网页、美化网页，提高网站知名度是一个很强大的辅助，可以弥补TABLE制作框架和表格时的很多不足和美工上的缺点，但是完全只用它来做，又有些费时费力，对中小型网站来说并不是很合适，所以网页设计时不能完全排斥任何一种，用TABLE+DIV+CSS也可以是一种很好的组合。

5.编码实战

demo1-使用table布局：

https://ptteng.github.io/PPT/demo/css-06-divAndTable/demo1.html

demo2-使用div+css布局：

https://ptteng.github.io/PPT/demo/css-06-divAndTable/demo2.html

6.扩展思考

什么情况下用table布局会更适合？

CSS布局的反英雄 - “display：table”

http://colintoh.com/blog/display-table-anti-hero

7.参考文献

表格table和CSS DIV排版模式的优缺点比较：

http://www.cnblogs.com/ulex/archive/2010/11/23/1885588.html