Div布局与Table布局比较-qaq卟言的个人博客

1.png
最近在修改页面的布局，之前写的table布局，现在更改为div布局
采用table布局的页面是很久之前开始写前端时候用dw开发的
主要是新人嘛开发速度快，但是如果table嵌套的层数太多的话
可能会导致页面一直出不来的情况以及会导致代码结构过于复杂，容易混乱
我们来对比一下这两个布局，就知道为什么我要更改原先布局了
因为table布局的网页要等table全都加载完，再进行页面的呈现
页面一直出不来，那这样用户的体验感就会很差
table布局没有实现结构（html）、表现（css）的分离，这样代码的结构就做不到很清晰了，所有的代码都混杂在一起
但是，table布局还是有优点的，容易上手。table布局就是用table来布局
只要在对应的位置填上对应的内容就可以了。相对来说，还是比较的简单明了的
表现上更加的“严谨”，在不同的浏览器，可以做到很好的兼容
div布局符合了w3c的标准，做到了结构、表现、行为（js）的分离
相当于给代码分类，每一类代码做什么事情都清楚明了，使得代码能够更好的维护
加快页面的加载速度。div布局有一个很好的地方是，它是一边加载，一边呈现的
这样网页基本不会出现一直出不来的情况，至少基本网页结构可以很快的呈现出来
这样用户的体验感就会很好。这是比table布局好的一个点
但是开发技术高，要考虑兼容不同版本的浏览器
总结
table优点
开发时间短（使用DW开发速度快），纯table各浏览器不会有兼容问题，内容可自适应，在搜索引擎排名能靠前
table缺点
如果布局变更，需要重新开发；如果table里有div ul等
可能会出现浏览器兼容问题，加载速度慢，table套table，会害死维护人员的
div优点
内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显
div缺点
开发技术高，要考虑兼容不同版本的浏览器
这是我更改后的布局
2.png

【Div布局与Table布局比较】

随机文章