`
wzping
  • 浏览: 101263 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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 的区域。

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布局一般都会表格嵌套多层形成较大的下载范围。

分享到:
评论

相关推荐

    table布局网页转换为div+CSS布局的转换软件

    table布局网页转换为div+CSS布局的转换软件. 非常快捷方便,一转眼一个老式样table布局网页的网页就转换成div+CSS布局的了,支持绝对定位和流定位.

    JS 表单验证 使用Frameset+Table布局(div也可)

    2 使用Frameset+Table布局(div也可) 3 对用户ID和用户名、口令不符合条件及时判断 4 对口令不一致进行及时判断 对34的及时判断,要求提示信息必须显示在同一个页面 也就是说显示在当前的行的后面或者上面或者下面 ...

    Table转div+css工具

    这个工具可以将原来table的html转换为div+css

    为什么我们不建议用Table布局

    一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。 (先花时间学一些CSS知识,会省去你以后大量的时间。) table对对于页面布局来说,从语义上看是不正确的。 (它描述的是表现,而不是内容。) table代码会...

    Table2CSS3.0.0完美汉化破解版|普通表格布局网页自动转DIV+CSS

    Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。 支持外部CSS,支持网页及目录批量转换。 Table2CSS在线演示视频:(演示视频为英文版本,软件为中文版本) http://www.table2css.com/demo-video ...

    ASP.NET 企业网站管理系统,Access版,本程序未开源,只适合建站。界面非DIV+CSS,采用老的Table布局,更方便老美工修改程序。

    ASP.NET 企业网站管理系统,Access版,本程序未开源,只适合建站。界面非DIV+CSS,采用老的Table布局,更方便老美工修改程序。

    DIV+CSS布局实例

    DIV+CSS布局实例 浅谈网页制作中table与div方法布局网页框架的利和弊.pdf - 下载...

    表格转换为div(Table2CSS)

    Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 这个软件原来是老外做的,收费的,但是经北京采摘在线Nodody汉化破解,已经没什么限制,完全可用了。 ...

    网页布局div+css

    现如今随着技术的不断发展,传统的利用table来进行网页布局的技术已经很少使用了,随着div+css的不断兴起,越来越多的人喜欢利用这项技术来进行网页布局,这份资料将给学习这项技术的初学者提供很好的帮助。

    漂亮的网站源码30个【华丽的JS特效+DIV控制布局】

    所有网站都采用CSS控制样式展现,没有table,都是DIV控制布局!更有一些网站有华丽丽的JS特效。 36个网站中包含了各行各业的网页设计,譬如图片站、门户站、企业站、宠物站、资讯站等等,而且足够让您欣喜的是绝大...

    DIV与Table布局在大型网站的可用性比较

    DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的。让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛。  DIV是标准,...

    表格转换DIV+CSS工具Table2CSS破解版

    介绍:Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 更新说明: 3.0.0 +增加DOM(文档对象模型)查看器,允许调整转换设置. +通用CSS前缀配置默认值"gen". ...

    DIV+CSS 网页布局心得

    我们在jb51.net一直强调交流的重要性,只有通过交流才能发现自己的不足,才能明确的知晓自己到底掌握了多少知识,哪些地方不足,哪些地方已经掌握,今天与大家分享一位jb51网友的DivCSS网页布局心得。DIV+CSS是目前...

    html中Div与table的区别(各方面细节探讨)

    Div与table的区别表现在的方面很多比如:速度和加载方式方面的区别、在网页应用中的差别、DIV与Table布局在大型网站的可用性比较等等,感兴趣的朋友可以参考下哈,希望在概念上的理解对大家有所帮助

    基于DIV_CSS的个人博客网页设计应用研究

    通过对传统 TABLE 布局的分析和对比,文章展示了 DIV+CSS 布局方法的优点和特点,并提供了实际的设计实例和代码片段,旨在帮助读者更好地理解和应用 DIV+CSS 布局方法。 DIV+CSS 布局方法的优点 DIV+CSS 布局方法...

    div+css table布局实现代码

    是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个...

    DIV+CSS完美布局

    本书用作者学习的经历向你讲述了基本css语法,通过实例让读者了解如何来用DIV+CSS来替代传统的table布局 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有...

    HTML css DIV 网页布局

    DIV+CSS 网页重构 DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现...

    布局用CSS+DIV的优点总结

    布局用CSS+DIV的优点总结 一、表现和内容相分离 使用CSS+DIV布局可以将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这使得网页的结构和...因此,CSS+DIV布局已经成为目前网页布局的主流。

Global site tag (gtag.js) - Google Analytics