HTML——使用表格进行页面布局
<!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>表格布局</title>
</head> <body bgcolor="white" leftmargin="0" topmargin="0">
<!--外层表格開始-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<!--中层表格開始-->
<table width="800" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<!--内层表格開始-->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="5"><img src="20140224112909_Pt8jK.jpg" width="600" height="200"/></td>
</tr> <tr height="50">
<td colspan="3">username:______ password:______</td>
<td colspan="2" align="right"><a href="http://www.baidu.com">帮助</a></td>
</tr> <tr height="2">
<td colspan="5" background="黑线.png"</td>
</tr> <tr valign="top">
<td width="140">
<h3 align="center">你喜欢海吗</h3>
<ul>
<li>写信告诉我今天</li>
<li>海是什么颜色</li>
<li>夜夜陪着你的海</li>
<li>心情又如何</li>
<li>灰色是不想说</li>
<li>蓝色是忧郁</li>
<li>而漂泊的你</li>
<li>狂浪的心</li>
<li>停在哪里</li>
</ul>
</td>
<td width="1" background="黑线.png"></td>
<td width="300">
<h3 align="center">我爱的大海</h3>
<img src="20120804021257_W3hWC.jpg" width="300" height="300"/>
<h3 align="center">你在哪呢</h3>
<ul>
<li>写封信给我就当最后约定</li>
<li>说你在离开我的时候是如何的心情</li>
</ul>
</td>
<td width="1" background="黑线.png"></td>
<td width="140">
<h3 align="center">你会喜欢的</h3>
<ul>
<li>写信告诉我你想要</li>
<li>梦什么</li>
<li>梦里外的我是否</li>
<li>都让你无从选择</li>
<li>我揪着一颗心</li>
<li>整夜都闭不上眼睛</li>
<li>为何你明明动了情</li>
<li>却又不靠近</li>
</ul>
</td>
</tr> <tr>
<td colspan="5"><img src="20140224112909_Pt8jK.jpg" width="600" height="100" /></td>
</tr> <tr height="40">
<td colspan="5" align="left">版权全部,翻录必究 ©1999-2014</td>
</tr> </tbody>
</table>
<!--内层表格结束-->
</td>
</tr>
</tbody>
</table>
<!--中层表格结束-->
</td>
</tr>
</tbody>
</table>
<!--外层表格结束-->
</body>
</html>
HTML——使用表格进行页面布局的更多相关文章
- html5: table表格与页面布局整理
传统表格布局之table标签排版总结: 默认样式: <style> table { max-width: 800px; border-spacing: 2px; border-coll ...
- 【Flutter学习】页面布局之列表和表格处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- Xamarin+Prism开发详解五:页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- HTML5-03 页面布局
概述 HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局.但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法 ...
- CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- 无废话ExtJs 入门教程十六[页面布局:Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- APP界面设计之页面布局的22条基本原则
移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...
- jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载
http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hiberna ...
随机推荐
- 安卓手机 HTML5 手机页面 输入表单被键盘遮挡住了
TML5 手机页面 输入表单被键盘遮挡住了 请问 大神 怎么 js 或者 JQ 判断安卓手机软键盘的键盘隐藏键按下去了? 有使用 uexWindow 方法 能判断到确定键 是 13 但是不知道这个键的 ...
- Codeforces 895.A Pizza Separation
A. Pizza Separation time limit per test 1 second memory limit per test 256 megabytes input standard ...
- POJ2096 Collecting Bugs(概率DP,求期望)
Collecting Bugs Ivan is fond of collecting. Unlike other people who collect post stamps, coins or ot ...
- 自定义header参数时的命名要求
HTTP头是可以包含英文字母([A-Za-z]).数字([0-9]).连接号(-)hyphens, 也可义是下划线(_).在使用nginx的时候应该避免使用包含下划线的HTTP头.主要的原因有以下2点 ...
- P2007 魔方
洛谷——P2007 魔方 题目背景 常神牛从来没接触过魔方,所以他要借助计算机来玩.即使是这样,他还是很菜. 题目描述 常神牛家的魔方都是3*3*3的三阶魔方,大家都见过. (更正:3 4以图为准.) ...
- 《流畅的Python》一副扑克牌中的难点
1.现在在看<流畅的Python>这本书,看了三页就发现,这本书果然不是让新手来入门的,一些很常见的知识点能被这个作者玩出花来, 唉,我就在想,下面要分析的这些的代码,就算我费劲巴拉的看懂 ...
- codechef Chef and Problems
终于补出这道:一直耽搁到现在 找到一个代码可读性很好的分块temp; 题意:给一个长度为n 的数组 A,Q次询问,区间相等数的最大范围是多少? 数据范围都是10e5; 当然知道分块了: 传统分块看各种 ...
- 二叉树的层次遍历 II
给定一个二叉树,返回其节点值自底向上的层次遍历. (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 例如:给定二叉树 [3,9,20,null,null,15,7], 3 / \ 9 20 ...
- SQL2000数据库密码被替换,重置密码提示未能找到存储过程sp_password解决方案
利用windows身份验证进入查询分析器后在master数据库下运行如下脚本: create procedure sp_password @old sysname = NULL, -- the old ...
- 一张图搞清楚PMBOK所有过程的使用
很多参加PMP培训的学员大概都会有一个感受,上课时似乎每个知识点都听懂了,大的知识框架也弄明白了,但是所有这些串起来在实践中怎么用呀!说的再直接一点,在考试的时候这些过程和活动是以怎样的逻辑来应用 ...