(1)表格布局

表格布局容易掌握，布局方便。但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距，这样布局的网页中表格会生成大量难以阅读和维护的代码；而且表格布局的网页要等整个表格下载完毕后才能显示所有内容，所有表格布局浏览速度较慢[2]。

(2)CSS+DIV布局

通常要实现比较精确和自适应的层布局需要设置层的样式，即用CSS控制层的位置。CSS+DIV布局采用Div来定位，通过Div的border(边框)、padding(填充)、margin(边界)和Float（浮动）等属性来控制板块的间距，具体实施是通过创建Div标签并对其应用CSS

[3]定位及浮动属性来实现。

CSS+DIV布局需要编写大量CSS样式代码来控制各布局DIV层，因此要掌握它相对表格布局会困难一些。但CSS+DIV布局较表格布局更加灵活实用，网站布局后很容易就能调整网站的布局结构；而且CSS+DIV布局的各布局DIV层可以依次下载显示，因此其访问速度较表

[4]格布局要快。

　　表格布局网页实例

以下为用表格布局的一个网页的代码[5]。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>表格布局</title> </head> <body>

<table width="900" height="280" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td height="82" colspan="2"><img src="header.jpg" width="900" height="82" /></td> </tr>

<tr>

<td height="32" colspan="2"><img src="links.jpg" width="900" height="32" /></td> </tr>

<tr>

<td width="190" height="618"><img src="left.jpg" width="190" height="618" /></td> <td width="710"><img src="main.jpg" width="710" height="618" /></td>

</tr>

<tr>

<td height="64" colspan="2"><img src="footer.jpg" width="900" height="64" /></td> </tr> </table></body></html>

　　CSS+DIV布局网页实例

<style type="text/css"> <!-- body{

text-align:center; } #container{

position:relative;

background-color:#00FF00;

margin-top:0px;

margin-right:auto;

margin-bottom:0px;

margin-left:auto;

height:765px;

width:900px;

text-align:left; } #header{

position:relative;

background-color:#FF0000;

height:82px;

width:900px;

text-align:left; } #links{

position:relative;

background-color:#FF9900;

height:32px;

width:900px;

text-align:left; } #left{

position:relative;

background-color:#FFFF66;

height:618px;

width:190px;

text-align:left;

float:right; } #main{

position:relative;

background-color:#00FFFF;

height:618px;

width:710px;

text-align:left;

float:left; } #footer{

position:relative;

background-color:#FF00FF;

height:64px;

width:900px;

text-align:left;

float:left; } --> </style> </head> <body> <div id="container">

<div id="header"><img src="header.jpg" /></div>

<div id="links"><img src="links.jpg" /></div>

<div id="left"><img src="left.jpg" /></div>

<div id="main"><img src="main.jpg" /></div>

<div id="footer"><img src="footer.jpg" /></div> </div> </body> </html>

代码说明：

(1)代码中共包含6个div标签，分别代表6个层。其中最外层的id为container的div

[7]起到一个容器的作用，用于容纳其它5个层。

(2)选择器body和#container的样式用于将最外层id为container的div（容器层）水平居中显示。

(3)其它几个选择器样式如#header，#links，#left，#main和#footer分别用来控制容器内5个层的显示。

(4)选择器#left和#main中有一个重要CSS属性float。其中在选择器#left中设置为float:left；而选择器#main中设置为float:right。该属性设定了id为left的层居左显示，id为main的层则居右显示。

(5)如果想将id为left和main的层交换位置，只需要在选择器#left中设置float:right；同时在选择器#main中设置float:left即可。

浅谈分析表格布局与Div+CSS布局的区别的更多相关文章

  1. 深度理解div+css布局嵌套盒子

    1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...

  2. div+css布局记扎

    实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...

  3. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  4. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  5. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  6. div+css布局教程系列1

    <!doctype html><html><head><meta charset="utf-8"><title>简单布局 ...

  7. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  8. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  9. DIV+CSS布局-固定页面开度布局

    DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...

随机推荐

  1. 关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）

    废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...

  2. [图形学] Chp10 OpenGL三维观察程序示例

    10.10节书中给出了一个程序示例,有一个填充正方形,从侧面的角度观察并画到屏幕上. 图0 这里进一步画出一个立方体,将相机放入立方体中心,旋转相机,达到在立方体中旋转看到不同画面的效果. 步骤: 1 ...

  3. Linux程序设计之shell程序设计

    看了<linux程序设计(第4版)>(作者:Neil Matthew ,Richard Stones ,陈建 ,宋健建译).做个笔记,以备后面查看. 首先,清楚几个概念. shell编程属 ...

  4. jQuery选择器分类

    jQuery的基本选择器 选择器的分类 <!--1.基本选择器 2.层级选择器 3.过滤选择器 3.1 基本过滤选择器 3.2 内容过滤选择器 3.3 可见性过滤选择器 3.4 子元素过滤选择器 ...

  5. 95后实习生的远程办公体验（asp.net mvc\C#技术栈）

    这个月我们做了一件别人看起来很疯狂的事情,就是让一批95后的实习生实行远程办公,效果还不错,于是写此文总结一下. 其实认真算算,我自己的远程工作经验有十年了吧,在北京工作的时候天气不好就申请在家办公, ...

  6. HDU 1728 逃离迷宫（DFS）

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=1728 题目: 逃离迷宫 Time Limit: 1000/1000 MS (Java/Others)  ...

  7. Ubuntu14.04设置开机自启动程序

    启动应用程序可以帮助我们选择开机启动项.但是在Ubuntu14.04通过Dash输入startup 找不到启动应用程序了,可以通过在控制台输入以下内容: gnome-session-propertie ...

  8. Hadoop之HDFS及NameNode单点故障解决方案

    Hadoop之HDFS 版权声明:本文为yunshuxueyuan原创文章.如需转载请标明出处: http://www.cnblogs.com/sxt-zkys/QQ技术交流群:299142667 H ...

  9. 用Node.JS+MongoDB搭建个人博客（app.js接口文件）（二）

    app.js的GitHub地址:用力戳我然后点个star 说个题外话,THINKPHP是通过一个index.php来引入文件,所以被称为接口文件. 而NodeJS也有这样的接口文件,通常也会放在根目录 ...

  10. Ajax的方法和使用代码

    //1.创建Ajax对象,已经封装好的函数: function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ re ...