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. 洛谷 3803 【模板】多项式乘法(FFT)

    题目:https://www.luogu.org/problemnew/show/P3803 第一道FFT! https://www.cnblogs.com/zwfymqz/p/8244902.htm ...

  2. 洛谷【P1616】疯狂的采药

    浅谈\(DP\):https://www.cnblogs.com/AKMer/p/10437525.html 题目传送门:https://www.luogu.org/problemnew/show/P ...

  3. xftp连接不上阿里云服务器

    打开xftp默认是使用FTP协议,要连接到云服务器,需要将协议改为SFTP 连接成功

  4. 蓝桥杯 历届试题 PREV-3 带分数

     历届试题 带分数   时间限制:1.0s   内存限制:256.0MB 问题描述 100 可以表示为带分数的形式:100 = 3 + 69258 / 714. 还可以表示为:100 = 82 + 3 ...

  5. Windows SID理解

    Windows安全性要依赖于几个基本元素.:访问令牌.SID.安全描述符.访问控制列表.密码. 访问令牌:访问令牌在本质上定义了两 上“P”:Permissions(权限)和Privilege(特权) ...

  6. mybatis---demo1--(单表增删改查)----bai

    实体类: package com.etc.entity; public class News { private int id; private String title; private Strin ...

  7. 带坑的几道PHP面试题

    第二题 代码如下: $i='11'; printf("%d\n",printf("%d",printf("%d",$i))); 输出结果是多 ...

  8. Ubuntu16.04 Hadoop2.6.0伪分布式安装与启动中遇到的问题

    1.安装JDK1.8,下载安装包解压至 /usr/lib/jdk vim /etc/profile #配置路径 export JAVA_HOME= /usr/lib/jdk export JRE_HO ...

  9. C#一般处理程序 ashx.cs使用Session报错问题

    HttpContext.Current.Session["UserID"].ToString();//报错,报Session为Null, 此时需要添加引用和继承IRequiresS ...

  10. 类型:Ajax;问题:ajax调用ashx参数获取不到;结果:ashx文件获取$.ajax()方法发送的数据

    ashx文件获取$.ajax()方法发送的数据 今天在使用Jquery的ajax方法发送请求时,发现在后台中使用ashx文件无法接收到ajax方法中传递的参数,上网查了一下原因后发现了问题所在,原来是 ...