制作网页时Div与Table的区别

1.制作效率

我想没人反对表格的制作效率要高于Div的效率。很明显Div布局代码全部都要手写。即使你在熟悉代码,也没有 Dreamweaver生成来的快吧!所以Table可以很容易建立起结构化的界面,通过table自身的参数定义,我们能把页面布局很快定义成我们所需要的效果。

2.浏览器的兼容问题

table和div在兼容问题中,table更具有优势。

我们常用的IE6.0,IE7.0火狐Firefox浏览器对div css设置上非常挑剔,往往同一个css在2种浏览器上会有不同的结果,对设计制作人员来说是个可怕的问题。我们不可能对用户的浏览器进行排斥和统一化,因此只有通过在制作的时候调整我们的语法和布局方法。div要求我们严格css支持,而table可以不用考虑这么多。table的严谨在不同浏览器中得到了很好的表现。

3.扩展性和可读性

Table的扩展性和可读性都是很差的,扩展差表现在维护和修正上面。DIV不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版。而Table则需要一个页面一个页面的更改需要变动的地方。

而可读性table基本上是没有的,谁能从一大堆代码里面看的出哪是标题哪是正文。全部是<table><tr><td></td></tr></table>。还一个障碍便是当table容器内内容过多时,使页面的加载时间增加,因为浏览器首先要加载<table> 标签,而在加载到</table>之前,table里的内容不会显示。

Table和div布局都有各自的优缺点。总体来说,使用Div布局的优点:

1.大大缩减页面代码,提高页面浏览速度。

2.结构清晰,可读性非常强,也容易被搜索引擎搜索到,优化了seo。

3.缩短改版时间。只要简单的修改几个CSS文件就可以改变很多页面。Table要想改变的话,需要一个页面一个页面的去修改。

4.表现和内容相分离,这点是非常符合w3c标准的。

对于公司经常制作的中小型企业网站,大家可以先试着用div+table去做,这只是一个过渡期。你会发现这个时期做起来比纯table和纯div+css去做要快很多。两种做法的优缺点都可以很好的互补。熟练后,可以用div去做下。另外w3c之所以推出div+css,其目的就是为了提高执行效率,优化程序,由原有的HTML向XML过度,作为长远的发展.div肯定是胜过table的。

1.大大缩减页面代码,提高页面浏览速度,缩减带宽成本;
2.结构清晰,容易被搜索引擎搜索到,天生优化了seo
3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题,改变字体颜色,字体样式等等。
5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
6.提高易用性。使用CSS可以结构化HTML,例如:<p>标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。
7.可以一次设计,随处发布。你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。
8.更好的控制页面布局。不用多说。
9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。
11.Table 布局灵活性不大,你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。
12.另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。
13.Table 中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div 更能体现样式和结构相分离,结构的重构性强。
14.在几乎所有的浏览器上都可以使用。

15.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。

16.使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。

17.你可以轻松地控制页面的布局 。

制作网页时Div与Table的区别,布布扣,bubuko.com

时间: 2024-07-29 18:55:49

制作网页时Div与Table的区别的相关文章

DIV CSS制作网页时易犯的错误总结

CSS+DIV是网站标准(或称"WEB标准")中常用的术语之一,通常 为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的 方式实现各种定位.应用应用DIV+CSS编码时很容易犯一些错误.本文列举了一些常见的错误: 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 Webjx.Com 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 网页教学

实现CSS制作网页时绝对居中问题

利用负边距方法,绝对定位使容器相对屏幕绝对居中,此时的被嵌套容器只能为绝对大小.(标准)根据margin负值和top left的比例控制,实现随屏幕绝对居中,容器大小改变需要重新调整margin top left的参数: <div style="background:#f00; width:740px; height:340px; left:50%; margin:-170px 0 0 -370px; position:absolute; top:50%;"></di

关于制作网页时乱码的问题详解

关于制作网页时乱码的问题详解 很多朋友在制作网页时会遇到一个很头疼的问题,就是乱码问题,有时改改编码就解决了,那是运气不错,而有时无论如何也解决不了,那就没办法了.我在制作网页时也遇到了不少问题,最后实在受不了了,只好花了三天时间来仔细研究乱码问题,小有成果,在这里和大家分享一下. 乱码在我看来分三种情况: 1.html乱码. 2.javascript乱码 3.数据库乱码(我用的是mysql,其他也一样,操作数据库是直接用phpmyadmin操作) 网页设计基本就这三种情况.笔者不幸的全遇到了(

当你制作网页时知道怎么去提升页面的交互性能吗?

网站的发展除了要提升目标关键词的搜索引擎排名,引来流量以外,还要增加网站的流量转化率.只有在网站的老用户不停增加的情况下,才能让网站的流量稳定下来,如果新用户跳出率等数据高,也会导致搜索引擎对你的网站评价降低,导致流量越来越少.凡科网站建设认为良好的流量增长必须配合站内的交互性提升,将新用户发展为老用户,才能让网站健康的发展,下面介绍几个制作网页时,能够提升页面交互性能的小技巧. 明显的按钮设计 不少站长在制作网页的时候为了保持网站的统一,将链接.按钮等跳转位置做得并不明显,用户其实并不喜欢这种

转: Div与table的区别

1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式是完成后加载,遇到 <table> 后,在读到 </table> 之前,table 中的内容不加载,或者传输中断了(document.onload()事件)的时候加载,这是因为T

Div与table的区别

1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 没有遇到 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式是完成后加载,遇到 后,在读到 之前,table 中的内容不加载,或者传输中断了(document.onload()事件)的时候加载,这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,IE才知道该怎么显示 2:在网页

作列表排列时div的table属性应用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> <style> .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} .clearfix:before,

【学习笔记】HTML基础:使用html制作网页

一.初识HTML 1.什么是HTML? Hyper Text Markup Language(超文本标记语言) 扩展XML:Extendsible  Markup Language(可扩展性标记语言) HTML(Hyper Text Markup Language)超文本标记语言是创建Web页面的基础,HTML由一套标记标签(Markup Tag)组成,在制作网页时,HTML使用标记标签来描述网页. 2.HTML的发展史 3.HTML5文件的基本结构 <html> <head> &

div与table用作布局的区别

本文向大家描述一下DIV和Table页面布局的区别和联系,一般来说Table开发快,容易控制,浏览器兼容也好些,另一部分认为DIV好,是以后的发展趋势,主要原因请看下文详细介绍. DIV布局和Table页面布局的区别和联系 现在对于网页制作是选择传统的Table还是用新型的DIV,有分歧.一部分说还是用Table好,开发快,容易控制,浏览器兼容也好些;另一部分认为DIV好,以后的发展趋势,主要是如下原因: DIV+CSS布局比Table布局节省页面代码,代码结构也更清晰明了. DIV+CSS开发