`
Messi光明
  • 浏览: 55634 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

网页布局之Div vs Table

    博客分类:
  • web
阅读更多

关于网页布局,大体上可以分为两种,一种是使用table布局,另一种使用div布局,很多人说现在主流的网页布局是div+css。那么divtable布局究竟有那些联系和区别呢?我们又该如何进行网页布局呢?

 

下面对这两种网页布局进行一些探讨。看了一些大公司的网页布局,其中腾讯,网易,中国移动等公司都使用的是div进行的布局。而工商银行则使用table进行布局。

 

divtable布局各自的优缺点:

1div+css进行布局,可以实现table的页面布局效果,还能减少页面中元素的个数,使得页面夹在较快,而且能更好的被搜索引擎相匹配。

2table进行布局可以有一个统一的外观,便于控制格式,对于初学者来说是很好的选择。还有一个最大的好处就是兼容性好。

3div的缺点是兼容性没有table好,而且对于新手来说,div没有table好控制。

4table的缺点就是太多的table嵌套会使网页的内容量减少,而且看起来非常臃肿,网页的加载速度变慢。

5:在网页显示的时候,table必须把结束</table>加载完以后才能显示整合网页,而div则是一个小的显示块,加载完以后可以逐个显示。这样div在一定程度上比table显示的要快,性能上更好。

 

 

个人分析感觉,在一些项目中,企业内部使用的管理信息系统,很多多使用的table进行布局,因为企业内部系统一般没有很多的特效,不需要精细的处理,也不是为了吸引人浏览而做的。相对来说企业网络较好,所以使用table布局快速,简洁,方便。而工商银行使用table应该更多的是想到了兼容性。

而一些互联网公司,它为了吸引客户,做了很多的特殊的效果,也为了增加自己在搜索引擎中的权重,必须做一些特殊的处理。使用div还是比较好的。

 

0
1
分享到:
评论

相关推荐

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

    在网页设计领域,传统的`table`布局曾是构建网页结构的主要方式,但随着Web标准的发展,`div`结合`CSS`布局(层叠样式表)逐渐成为主流。`table`布局虽然简单易用,但在复杂性和可维护性上存在诸多问题,如不易控制...

    Table转div+css工具

    在网页设计领域,布局方式的发展经历了从表格(Table)到层(Div)+CSS的转变。"Table转div+css工具"就是专为此目的而设计的一款实用软件,它能够帮助开发者将原有的基于表格的HTML代码转换成使用Div和CSS进行布局的...

    table转div工具

    相比之下,div是一个无语义的容器,通过CSS可以实现流式、网格、定位等多种布局方式,适应不同设备和屏幕尺寸,更适合现代网页设计的需求。 "table转div工具"能够自动分析HTML中的table元素,将其转换为div结构,并...

    table转div、table转css

    在网页设计领域,将传统的HTML表格(table)转换为由CSS布局控制的div元素,是一种常见的优化网页可维护性和响应式设计的方法。标题"table转div、table转css"所指的就是这一过程,即利用特定工具将原本用表格布局的...

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

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

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

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

    div table的使用

    本文将深入探讨如何在服务器端利用存储过程生成`table`数据,并将其嵌入到`div`容器中,以实现更灵活的页面布局。 首先,`div`(division)是HTML中的一个块级元素,它主要用于对页面内容进行分组和布局。通过CSS...

    Div仿制table送自定义Scrollbar支持排序

    首先,Div仿制table是通过CSS布局(如Flexbox或Grid)和JavaScript来构建一个看起来和表格类似的结构,这样可以更灵活地控制单元格的样式、行高和列宽,同时还能实现响应式设计。对于不支持这些新特性的老旧浏览器...

    css+div和table+css的比较

    CSS+div 和 table+css 是网页布局的两种常见方法,它们各有优缺点。首先,我们来看一下 div 和 table 的基本概念。 `div` 是 HTML 中的一个块级元素,用于组织文档的大块内容。它是一个容器,可以容纳其他 HTML ...

    Table2CSS表格转CSS+DIV布局工具

    【标题】"Table2CSS表格转CSS+DIV布局工具"是一款专为网页设计者打造的实用软件,旨在帮助用户将传统的HTML表格布局转换为更现代、更灵活的CSS(层叠样式表)与DIV(定义文档结构的HTML元素)布局。这种转换能够提升...

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

    Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%) (这会限制你页面设计的自由性。) 一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。 (先花时间学一些CSS知识,会省去你以后大量的...

    DIV 实现表格布局

    在网页设计中,传统的表格布局通常使用`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等HTML标签来实现,但随着CSS技术的发展,我们可以通过使用`div`元素结合CSS样式来实现类似表格的布局,这被称为“CSS布局”或“DIV布局”。这种布局...

    一个div css 网页 布局 模版

    在网页设计领域,Div CSS布局模版是一种常用的技术,用于构建高效、响应式的网页结构。Div,全称为“Division”,是HTML中的一个区块元素,它允许我们将网页内容划分为多个独立的部分,便于管理和样式化。CSS,即...

    div模拟table滚动时表头固定,兼容ie6

    - 使用`z-index`属性确保表头div位于表体div之上,以便在滚动时仍然可见。 3. **列宽同步**:为了保持表头和表体的列宽一致,可以监听窗口的`resize`事件,动态调整div的宽度。此外,如果表体中的列宽发生变化,也...

    将table转换成div+css

    在网页设计中,传统的HTML表格(table)曾经是布局的重要方式,但由于其对网页加载速度的影响和不灵活性,现代网页设计更多地倾向于使用CSS布局,尤其是div元素配合CSS样式。"将table转换成div+css"这个主题正是针对...

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

    相比之下,DIV+CSS提供了更好的灵活性和控制力,可以实现更复杂的布局,同时有利于提高页面加载速度和适应不同设备的显示。 对于“老美工”来说,Table布局可能更容易理解和操作,因为它们更直观地反映了页面的物理...

    div模拟table兼容ie620140424

    标题"div模拟table兼容ie620140424"指出,这是一个关于在2014年时如何使用div元素来模拟table布局,并确保在IE6中达到兼容性的技术问题。描述中提到,目标是实现table的自适应功能,以及表头的列宽与表体列宽保持...

    利用层的table-row、table-cell属性进行页面布局

    在网页设计中,布局是至关重要的,因为它决定了页面元素如何排列和对齐。"利用层的table-row、table-cell属性进行页面布局"是一种常见的CSS布局技术,尤其在早期的Web开发中广泛使用,尽管现代CSS布局如Flexbox和...

    DIV+CSS布局实例

    在网页设计领域,`DIV+CSS`布局是一种广泛采用的技术,它改变了早期依赖于`Table`布局的传统方式。本文将深入探讨`DIV+CSS`布局的优势、劣势,并通过实例解析其工作原理,以及如何实现固定头部(hd)和底部(ft)的...

    网页布局div+css

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

Global site tag (gtag.js) - Google Analytics