学习笔记 HTML5--table布局与div+css布局

本文是和大家交流一下DIV布局和Table布局的比较,DIV可以理解成一个块,是一个比table表格简单的元素,从语法上只有<div></div>这样简单的定义。

DIV布局和Table布局的区别

传统Table布局方式实际上是利用了HTMLTable表格元素具有的无边框特性,由于Table元素可以在显示时使得单元格的边框和间距为0,即不显示边框,因此可以将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合。

表格布局的代码最常见的是在HTML标签之间嵌入一些设计代码,如width=100%,border=0等。表格布局的混乱代码就是这样编写的,大量样式年设计代码混杂在表格,单元格中,使得可读性大大降低,维护起来成本也相当高,尽管有类似于Dreamweaver(以下简单称dw)这样可视化的界面进行编写,只要你需要什么,他帮你写入什么样式,最终结果是表格中到处留下设计的足迹,混合式代码也由此而成。

DIV可以理解成一个块,是一个比table表格简单的元素,从语法上只有<div></div>这样简单的定义。DIV最大的好处就是样式是由CSS来控制。

但总体上而言:

1.DIV+CSS布局比Table布局节省页面代码,代码结构也更清晰明了.

2.DIV+CSS的页面对搜索引擎支持好,而且速度更快了,能够比Table更加快速的显示网站内容.

3.DIV+CSS布局使网站版面布局修改变的更简单,因为版面代码都写在独立的css文件里修改起来方便多了,不象Table要在页面中修改很多信息.

猜你喜欢

转载自blog.csdn.net/frankfurter2016/article/details/79699349
今日推荐