DIV和table页面布局的区别和联系
2012-06-01 15:15
295 查看
本文向大家描述一下DIV和Table页面布局的区别和联系,一般来说Table开发快,容易控制,浏览器兼容也好些,至于DIV的优势请看下文详解。
DIV和Table页面布局的区别和联系
现在对于网页制作是选择传统的Table还是用新型的DIV,有分歧。一部分说还是用Table好,开发快,容易控制,浏览器兼容也好些;另一部分认为DIV好,以后的发展趋势,主要是如下原因:
DIV+CSS布局比Table布局节省页面代码,代码结构也更清晰明了。
DIV+CSS开发速度要比Table快,而且布局更精确,不过手写代码明显增加DIV+CSS布局,使网站版面布局修改变的更简单。
DIV+CSS布局能够适应未来多种客户端需求。
DIV+CSS布局节约站点所占空间和站点流量。这些都是DIV的好处。
DIV有这么多好处是不是有些心动,决定学它。DIV和Table各有长处,通常情况下它们可以互换使用。
我感觉正确的符合标准的设计思路是:使用DIV等布局元素来制作页面的设计布局,定位,色块,图片等。使用Table,UL等这样的元素来显示页面中需要展示的数据。因为DIV不会像Table一样,在IE下要将整个Table下载完后才全部显示内容(firefox不会),所以用Table来布局显然是不合适的,尤其是数据量大时,在IE下用Table会发现慢的多。而DIV就好多了。当然,DIV也起整理数据的作用。
DIV用于布局,Table用于显示数据,这是现在最基本的设计原则。
1:Table里可以内嵌DIV。反之DIV可以内嵌Table吗??
当然可以了。
◆DIV定义
表示一块可显示HTML的区域。
SpecifiesacontainerthatrendersHTML.
注释
此元素在InternetExplorer3.0及以上版本的HTML中可用,在InternetExplorer4.0及以上版本的脚本中可用。
此元素是块元素。
此元素需要关闭标签。
TheDIVelementisavailableinHTMLasofInternetExplorer3.0,andinscriptasof InternetExplorer4.0. Thiselementisablockelement. Thiselementrequiresaclosingtag.
示例代码
下面的例子使用了两个DIV元素对两段文字进行了不同的对齐处理。
DIV本身就是容器性质的,你不但可以内嵌Table还可以内嵌文本和其它的HTML代码。
2:DIV是不是跟Table一样的作用?
DIV的作用跟Table是差不多的,但是DIV对xml的支持更好而且使用起来比较灵活,因此被推荐为新的网页布局方式。
3:DIV Table哪个速度快?
DIV相对比较快,网页内容的显示需要将相对一整块的内容下载完成后再显示。使用DIV布局是许多的独立的相对较小的范围,而使用Table布局一般都会表格嵌套多层形成较大的下载范围。
转载地址:http://blog.csdn.net/chinalogs/article/details/7617124
DIV和Table页面布局的区别和联系
现在对于网页制作是选择传统的Table还是用新型的DIV,有分歧。一部分说还是用Table好,开发快,容易控制,浏览器兼容也好些;另一部分认为DIV好,以后的发展趋势,主要是如下原因:
DIV+CSS布局比Table布局节省页面代码,代码结构也更清晰明了。
DIV+CSS开发速度要比Table快,而且布局更精确,不过手写代码明显增加DIV+CSS布局,使网站版面布局修改变的更简单。
DIV+CSS布局能够适应未来多种客户端需求。
DIV+CSS布局节约站点所占空间和站点流量。这些都是DIV的好处。
DIV有这么多好处是不是有些心动,决定学它。DIV和Table各有长处,通常情况下它们可以互换使用。
我感觉正确的符合标准的设计思路是:使用DIV等布局元素来制作页面的设计布局,定位,色块,图片等。使用Table,UL等这样的元素来显示页面中需要展示的数据。因为DIV不会像Table一样,在IE下要将整个Table下载完后才全部显示内容(firefox不会),所以用Table来布局显然是不合适的,尤其是数据量大时,在IE下用Table会发现慢的多。而DIV就好多了。当然,DIV也起整理数据的作用。
DIV用于布局,Table用于显示数据,这是现在最基本的设计原则。
1:Table里可以内嵌DIV。反之DIV可以内嵌Table吗??
当然可以了。
◆DIV定义
表示一块可显示HTML的区域。
SpecifiesacontainerthatrendersHTML.
注释
此元素在InternetExplorer3.0及以上版本的HTML中可用,在InternetExplorer4.0及以上版本的脚本中可用。
此元素是块元素。
此元素需要关闭标签。
TheDIVelementisavailableinHTMLasofInternetExplorer3.0,andinscriptasof InternetExplorer4.0. Thiselementisablockelement. Thiselementrequiresaclosingtag.
示例代码
下面的例子使用了两个DIV元素对两段文字进行了不同的对齐处理。
ThisexampleusestwoDIVelementstoaligntwosectionsoftextdifferently. <DIV> 此文本代表一段。可以在这里放你的HTML或文本 </DIV> <DIVALIGNDIVALIGNDIVALIGNDIVALIGN=CENTER> 此文本代表另外一段,其中文本居中显示。 </DIV>
DIV本身就是容器性质的,你不但可以内嵌Table还可以内嵌文本和其它的HTML代码。
2:DIV是不是跟Table一样的作用?
DIV的作用跟Table是差不多的,但是DIV对xml的支持更好而且使用起来比较灵活,因此被推荐为新的网页布局方式。
3:DIV Table哪个速度快?
DIV相对比较快,网页内容的显示需要将相对一整块的内容下载完成后再显示。使用DIV布局是许多的独立的相对较小的范围,而使用Table布局一般都会表格嵌套多层形成较大的下载范围。
转载地址:http://blog.csdn.net/chinalogs/article/details/7617124
相关文章推荐
- DIV和table页面布局的区别和联系
- DIV和table页面布局的区别和联系
- div和table页面布局的区别
- table和div在页面布局上应该注意的问题
- div布局和table布局的区别
- div与table用作布局的区别
- table布局与DIV+CSS布局的区别
- 页面布局Table和Div哪个更好
- <div+css页面布局课堂笔记>3---页面布局的盒子模型(IE与其他浏览器区别)
- div和table 用作布局的 区别
- DIV与Table两种页面布局方式的优缺点
- div和table 用作布局的 区别
- 用table布局和div布局的区别
- DIV与Table两种页面布局
- DIV+CSS页面布局,样式中区别苹果浏览器Safari
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
- DIV+CSS布局和TABLE布局的区别
- DIV与Table布局在大型网站的可用性比较
- 利用div的定位制作复杂的页面布局
- table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)