DIV布局和TABLE页面布局详解

刚接触html的时候，利用table进行页面布局是比较容易的，但是，在实际的项目开发过程中，我们不建议用table进行布局，现在来分析一下原因

一、DIV布局和TABLE页面布局的区别和联系

1、DIV布局优点

• DIV+CSS布局 比 TABLE布局 节省页面代码，代码结构也更清晰
• DIV+CSS布局 比 TABLE布局 开发速度快，而且布局更精确
• DIV+CSS布局 使网站布局修改变的更简单
• DIV+CSS布局 能够适应未来多种客户端需求
• DIV+CSS布局 节约站点所占空间和站点流量

２、TABLE布局缺点：

• TABLE比其它html标记占更多的字节（造成下载时间延迟，占用服务器更多流量资源）
• TABLE会阻挡浏览器渲染引擎的渲染顺序（会延迟页面的生成速度，让用户等待更久的时间）
• TABLE里显示图片很复杂，需要你把单个、有逻辑性的图片切成多个图（增加设计的复杂度，增加页面加载时间）
• 在某些浏览器中，TABLE里的拷贝文字会出现问题（对用户不友好）
• TABLE会影响其内部的某些布局属性的生效（比如里的元素的height:100%) （限制页面设计的自由性）

一旦学了CSS的知识，你会发现使用TABLE做页面布局会变得更麻烦

• TABLE在进行页面改版或内容抽取的时候会让麻烦
• TABLE一旦设计完成就很难通过CSS让它展现新面貌

３、TABLE优点

• 用table做表格很恰当

4、什么时候应该使用TABLE

• 当这些行或者列的信息共享某一个属性（比如每行显示一个学生的信息，所有学生都有个‘姓名’属性）

二、常见小问题

1、TABLE和DIV可以互相嵌套么?

• 当然可以
• DIV表示一块可显示HTML的区域，DIV本身就是容器性质的，不但可以内嵌TABLE还可以内嵌文本和其它的HTML代码

2、DIV是不是跟TABLE一样的作用?

• DIV的作用跟TABLE是差不多的
• 但是DIV对xml的支持更好而且使用起来比较灵活，因此被推荐为新的网页布局方式

3、DIV和TABLE哪个速度快?

• DIV相对比较快，网页内容的显示需要将相对一整块的内容下载完成后再显示
• 使用DIV布局是许多的独立的相对较小的范围
• 使用TABLE布局一般都会表格嵌套多层形成较大的下载范围

所以，现在最基本的设计原则：DIV用于布局，TABLE用于显示数据

参考文章推荐：
解析DIV布局和Table页面布局不同