DIV+CSS布局和TABLE布局的优缺点

html-css013

DIV+CSS布局和TABLE布局的优缺点,第1张

DIV+CSS布局和TABLE布局的优缺点

TABLE布局是早以前CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。

什么是div+css?

DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。XHTML基于可扩展标记语言(XML)，是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

流行优势

1、符合W3C标准。

2、支持浏览器的向后兼容。

3、搜索引擎更加友好。

4、样式的调整更加方便。

5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。

6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

一.div+css布局的好处：

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的'可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度(最重要的)(在IE中要将整个table加载完了才显示内容)。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

二.table布局的好处(table布局也不是一点用的没有，这点是毋庸置疑的)

1.容易上手。

2.可以形成复杂的变化，简单快速。

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

采用CSS+DIV对网站重构日趋被大家重视起来了，尤其是大型站点，现在你随便打开一个大型门户网站，看看源文件就可以知道是否为div+css构架了，其实，在之前很多人做网页都是使用table表格嵌套，但是随着web2.0、web3.0的不断发展，这种以表格嵌套的方式已经被DIV+CSS逐步取代了，未来网页设计肯定朝着div+css的方向发展。 采用CSS+DIV进行网页相对与传统的TABLE网页布局而具有以下几个显着优势： 1、表现和内容相分离 将设计部分单独分离出来放在一个独立样式文件中，HTML文件中只存放文本信息。 2、提高搜索引擎对网页的索引效率 利用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。 3、提高页面浏览速度 对于同一个页面的视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有後者的1/2大小。 4、易于维护和改版 只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

table 更多面向数据表格，而且tr、td属性控制起来也没有div容易灵活多变（table布局随时面临合并单元格，一格高、宽发生变化，其他格也跟着受累）。div+css可定位可浮动，可排序，再者div+css会让代码更具可读性，想想布满编辑器的table、tr、td标签，你能分得清哪里是哪里吗！

优点总结起来就是：DIV+CSS让布局灵活易控，代码清晰易读。