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">用户名:______ 密码:______</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">版权所有,翻录必究 &copy;1999-2014</td>
                      </tr>

                  </tbody>
                 </table>
                 <!--内层表格结束-->
                 </td>
               </tr>
            </tbody>
            </table>
            <!--中层表格结束-->
           </td>
           </tr>
         </tbody>
      </table>
      <!--外层表格结束-->
      </body>
</html>

时间: 2024-10-24 05:06:16

HTML——使用表格就行页面布局的相关文章

Bootstrap页面布局10 - BS表格

①了解需要怎样的表格标签结构 ②bootstrap为我们提供了一些类来变换表格样式 1.table中添加 <table class='table'></table> 如图: 2.table中添加 <table class='table table-striped'></table> -- 奇偶行背景色区别 如图: 3.table中添加<table class='table table-bordered'></table> -- 表格显

html5: table表格与页面布局整理

传统表格布局之table标签排版总结: 默认样式: <style> table { max-width: 800px; border-spacing: 2px; border-collapse: initial; } table td { padding: 10px; min-width: 50px; box-sizing: border-box; } </style> 1. 基本表格(双线表格) table标签内添加border属性:border="1",va

页面布局二

一.首先分析布局,可以把页面分成3个部分 (1)第一行  只有一个单元格,里面只有一张图片 (2)第二行  只有一个单元格 一个p标签里包含了4个超链接 (3)第三行 两个单元格 主要是第三行 第二列的表格比较复杂,我的思想就是一行一行看,设置rowspan,并把它一列其他被合并的删除掉 二.修饰 第一行 图片距离左边有距离 第二行 和页面布局一思想接近就直接贴代码了  主要是结构伪类选择器的应用 第三行通过PS测量得知表格是居中的,所以设置表格宽度和居中,然后设置每个td的宽度,和表格之间的距

(转)安卓基本页面布局

布局: 在 android 中我们常用的布局方式有这么几种: 1.LinearLayout ( 线性布局 ) :(里面只可以有一个控件,并且不能设计这个控件的位置,控件会放到左上角) 线性布局分为水平线性和垂直线性二者的属性分别为: android:orientation= "horizontal android:orientation= "vertical" . 2.RelativeLayout ( 相对布局 ) : (里面可以放多个控件,但是一行只"   能放一

无废话ExtJs 入门教程十六[页面布局:Layout]

无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distribution;layout] 对事物的全面规划和安排,布:陈设:设置. 我对布局理解是“把**东西放在**位置显示”[动词]. ok,我们这节课就讲一下怎么样把 ExtJs 的组件,放到我们想放置的位置. 一.常用布局 (1)ContainerLayout:默认布局方式,其他布局继承该类进行扩展功能.显示:

常用页面布局分享

1. 页面常用布局 常用的页面布局方式主要有:浮动,弹性盒子,定位,设置表格模式,行内与块级相结合. 布局方式 Float flex position table block&Inline-block 兼容性 IE4 IE10 IE7 IE8 IE8 注意 清除浮动 设置自适应子容器与父容器 嵌套使用,各中关系 内容会自适应 效果有局限性,行内块之间有缝隙 1.1.浮动布局(Float) 值 描述 left 元素向左浮动. right 元素向右浮动. none 默认值.元素不浮动,并会显示在其在

模拟表格 inline-block等高布局

表格是个好东西,它可以自动根据内容来调整格子,确保数据正常显示,并且不破坏表格的结构.但也有一些劣势,因为是用大量标签堆砌而成,页面结构会比较乱,细节也往往不容易控制.所以我们希望有表格的展示效果,但不想用表格,于是就有了模拟表格. 对于HTML中的同级数据,我们更希望把它们放到一起.所以UL.LI的结构可以满足需求,UL就是整个表格,LI就是我们的单元格.对LI元素设置display:inline-block,让其并行排列.然后要让元素像表格一样就需要设置适当的宽度,比如下面的例子使用33.3

jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载

http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hibernate实现了一个系统的一小部分功能,下面给大家分享一下. 首先看运行效果: [图一:登录页] [图二:页面布局] [图三:用户编辑层] [图四:确认弹出框] 准备 easyui插件简介在这就不赘述了,大家可以在iteye上找到很多该插件的相关消息. 如果页面需要使用easyui插件,需要引进一下js和

网页开发学习笔记九: css 页面布局

文档流 块元素独占一行 行内元素在一行上显示 自上而下 浮动 float 用法 float: left | right; 特点 浮动起来 不占位置(脱标) 如果多个盒子都使用了浮动, 会在一行上显示 尽量用 display: inline-block; 来转 行内块 作用 文本绕图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>