table 简单布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table布局</title>
</head> <body marginheight="0px" marginwidth="0px">
<table width="100%" height="965" style="background-color: #003">
<tr>
<td colspan="3" width="100%" height="320" style="background-color: #C6C">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color:#303">这是左半部</td>
<td width="70%" height="80%" style="background-color: #CC3" >这是右半部</td>
<tr>
<td width="100%" height="10%" style="background-color: #600" >这是下部</td>
</tr> </table> </body>
</html>

div 简单布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>idv布局</title> <style type="text/css">
body{ margin:0px;}
div#center{
width:100%;
height:950px;
background-color: #666;
}
div#heading{
width:100%;
height: 10%;
background-color:#096
}
div#menuw{
width:30%;
height:80%;
background-color:#993;
float:left;
}
div#lift{ width:70%;
height:80%;
background-color:#FC0
float:left;
}
div#floor{ width:100%;
height:10%;
background-color: #39F;
clear: both;}
</style>
</head>
<body>
<div id="center">
<div id="heading">头部</div>
<div id="menuw">左半部分</div>
<div id="lift">右半部分</div>
<div id="floor">底部</div>
</body>
</html>

对比:个人觉得table简单好理解,就像垒砖一块挨一块,踏实。 而div更具特色,就像泼墨,随便勾画几笔便是巨作。

简单 说table 和 div 各有各的好处。

头部
左半部分
右半部分
底部

table 和 div 简单布局的更多相关文章

  1. 浅谈table和DIV网页布局

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

  2. js动态生成按钮,页面用DIV简单布局2

    对前边不完善的修改 <!DOCTYPE html><html><head><title>test.html</title> <meta ...

  3. js动态生成按钮,页面用DIV简单布局

    今天朋友让我忙帮给写个页面,由于时间紧破,所以没有完善,暂时先贴出来,以后有时间了在做修改 <!DOCTYPE html><html><head><title ...

  4. div简单布局理解

    以下是div的理解

  5. 每天点滴的进行,css+div简单布局...布局

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  7. div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  8. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

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

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

随机推荐

  1. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

  2. 超时 CS-8610 中性笔

    超时 CS-8610 中性笔 最初觉得这款笔很简单,而且还认为有点丑,因为笔头比较短. 比较特别提这款中性笔比一般的中性笔要粗一点. 使用后才发现比其它的中性笔好用,因为笔杆粗,手感好,笔杆上并没有特 ...

  3. HL7 标准及实现指南 必看的网址

    V2: http://hl7book.net/index.php?title=HL7_version_2 包括HL7 的介绍,主要章节,每个版本的变化, 各种语言实现的HL7库,免费HL7工具, 最新 ...

  4. microsoft windows network 不允许一个用户使用一个以上用户名与服务器或共享资源的多重连接

    运行CMD在命令行中运行net use * /del /y 命令中断开所有连接最后,你再次访问 ,就不会有问题了. 而且可以连接多个samba用户.

  5. POJ3111(最大化平均值)

    K Best Time Limit: 8000MS   Memory Limit: 65536K Total Submissions: 8458   Accepted: 2163 Case Time ...

  6. 机器学习:调整kNN的超参数

    一.评测标准 模型的测评标准:分类的准确度(accuracy): 预测准确度 = 预测成功的样本个数/预测数据集样本总数: 二.超参数 超参数:运行机器学习算法前需要指定的参数: kNN算法中的超参数 ...

  7. [iOS]UIImageView增加圆角

    [iOS]UIImageView增加圆角 "如何给一个UIImageView增加圆角?有几种方法?各自区别?" 备注:本文参考自http://www.jianshu.com/p/d ...

  8. DripRoad(点滴之路)

    关于DripRoad DripRoad 意为点滴之路,程序员之路在于点滴积累!是的,这些积累包括技术能力,沟通能力,业务能力等等.   我 我是唐志伟,2009年一个人来上海,就读于上海医疗器械高等专 ...

  9. HDLM命令dlnkmgr详解之三__view

    view命令主要用于显示program information, path information, LU information, HBA port information, CHA port in ...

  10. 判断Integer值相等不能用==

    今天在开发中判断两个Integer值相等, Integer a = 3; Duixiang duixiang = new Duixiang(); duixiang = DAO.getDuixiang( ...