html网页中div布局和table布局的优劣势以及如何将二者结合

一、Table布局的缺点

  1.把格式数据混入你的内容中。这使得文件的大小无谓的变大,而用户访问每个页面时都必须下载一次这样的格式信息,带宽并非免费。使得重新设计现有的站点和内容极为消耗劳力。还使我们保持整个站点的视觉的一致性极难,花费也极高。

  2.基于表格的页面还大大降低了它对残疾人和用手机或PDA浏览者的亲和力。

  二、Table布局的优点

  1.容易上手。

  2.可以形成复杂的变化,简单快速。

  3.表现上更加“严谨”,在不通的浏览器中都能得到很好的兼容。

  三、Div布局的缺点

  1.相比table有一定的技术门槛。

  2.浏览器的标准不统一,要做兼容性比较麻烦。

  3.数据处理超级麻烦。

  四、Div布局的优点

  1.加快了页面的加载速度。

  2.符合W3C标准,代码结构清晰明了,结构、样式和行为分离,带来足够好的可维护性。

  3.全局代码控制,让你在修改设计时更有效率而代价更低。

  4.内容分离,让你的站点可以更好地搜索引擎找到。

  5.在世界上越来越多人采用采用Web标准时,它还能提高你的职场竞争实力。

现在对于网页制作是选择传统的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 的区域。

Specifies a container that renders HTML.

注释
此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用,在 Internet Explorer 4.0 及以上版本的脚本中可用。

此元素是块元素。

此元素需要关闭标签。

The DIV element is available in HTML as of Internet Explorer 3.0, and in script as of

Internet Explorer 4.0.

This element is a block element.

This element requires a closing tag.

示例代码
下面的例子使用了两个 DIV 元素对两段文字进行了不同的对齐处理。

This example uses two DIV elements to align two sections of text differently.

<DIV>
此文本代表一段。可以在这里放你的HTML或文本
</DIV>
<DIV ALIGN=CENTER>
此文本代表另外一段,其中文本居中显示。
</DIV>
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码。

2:div是不是跟table一样的作用?
div的作用跟table是差不多的
但是div对xml的支持更好 而且使用起来比较灵活
因此被推荐为新的网页布局方式
3:div TABLE 哪个速度快?
DIV相对比较快,网页内容的显示需要将相对一整块的内容下载完成后再显示。使用DIV布局是许多的独立

的相对较小的范围,而使用table布局一般都会表格嵌套多层形成较大的下载范围。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: