传统表格布局与div+css布局有那些区别?

一,传统的表格布局

表格是网页设计制作中的一个重要的网页元素,用于网页的排版,使页面的信息布局合理、简洁。表格排版也存在这些问题:

(1)表格排版页面难修改或升级,当页面制作完成后,要将其中的位置对调,那么相当于重新制作一个页面。而CSS排版利用positiont和floa属性可以快速的移动和重新定位,让用户动态选择界面的功能。

(2)表格排版的页面在下载时必须等整个表格的内容都下载完毕后才会一次性显示出来,而利用DIV+CSS排版的页面在下载时,各个子块可以分别下载显示,从而提高了页面的下载速度。

(3)复杂的表格设计使得设计不易,修改更复杂,最后生成的网页代码除了表格本身的代码,还有许多没有任何意义的图像占位符及其他元素,文件量庞大,导致浏览器下载,解析速度变慢,维护和更新困难。

二,DIV+CSS布局

网页改版维护与方便快捷:

运用CSS技术可以把要展示的内容与其表现样式分开,对CSS文件进行修改,其他HTML文件中自动进行套用,不必在每个HTML文件中重复设置,减少设计者更多负担,修改页面更省时。

保持视觉的一致性:

运用DIV+CSS技术,方便地为所有网页设置一种风格,使用DIV+CSS的制作方法,可以将所有页面,或所有区域统一由CSS文件控制,避免了不同区域或不同页面体现出的效果偏差。

页面载入得更快:

大部分页面代码写在了CSS当中,使页面体积容量更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多区域,打开页面时,逐层加载,而不像表格嵌套那样整个页面圈在一个大表格里,由此页面加载速度更加极速。

搜索引擎友程度高:

用TABLE进行网页布局的代码较多,搜索引擎要把多的代码去掉。而使用DIV+CSS布局设计网页,所有样式都在CSS里,正文代码得到极大的精简,也减少了HTML代码,正文就突出了,搜索程序能在更短的时间内爬完整个页面,搜索程序执行效率得到了提升。

结语:

使用DIV+CSS布局,实现了结构、表现和行为的分离。提高了网页开发的效率和页面下载的速度,提高了网站维护和修改的效率,对比与传统表格布局更加方便以及轻松,传统表格使得设计不易,修复复杂,会有很多没有意义的东西占用元素,文件量过大使得浏览下载失败。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181030A0AXQG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券