第三章表格布局与表单交互

W0500

于 2024-09-27 21:50:35 发布

阅读量864

点赞数 20

文章标签： css html 前端

本文链接：https://blog.csdn.net/W0500/article/details/142374480

版权

3.1 表格概述

表格是网页的一个重要容器，可包含文字和图像，能将网页分成多个任意的矩形区

3.1.1 表格的结构

表格是由行和列组成的二维表，每行由一个或多个单元格组成，用于放置数据或其它内容

3.1.2 表格的基本语法

标记形式	说明
<table></table>	表格标记
<caption></caption>	表格标题标记
<th></th>	表格表头标记
<tr></tr>	表格的行标记
<td></td>	表格的列标记

<table>
		<caption>23软件2班名单</caption>
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<td>女</td>
		</tr>
		</table>

3.2 表格属性的设置

对表格的设置实质是对表格标记属性的设置

3.2.1 表格边框属性

（1）border属性。用于设置边框的粗细，单位是像素

<table border="3px">

(2) bordercolor 属性。用于设置表格边框的颜色，可以使用rgb 函数、十六进制数和颜色英文名称。
(3) bordercolorlight 属性。用于设置表格亮边框，对表格左上边框生效。

(4) bordercolordark 属性。用于设置表格暗边框，对表格右下边框生效。

3.2.2 表格的宽度和高度属性

(1) width。其单位可以是长度单位或百分比，用于定义表格的宽度。

(2) height。其单位可以是长度单位或百分比，用于定义表格的高度。

<table width="200px" height="100px">

设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整。

<table width="20%" height="10%">

屏幕录制 2024-09-20 网页设计

3.2.3 表格背景颜色与表格图像属性

<table bgcolor="azure">
			
<table background="img/school.jpg">

3.2.4 表格边框样式属性

<table frame="hsides" rules="all">

3.2.5 表格单元格间距、单元格边距属性

3.2.6 表格水平对齐属性

对齐方式，居左、居中、居右

<table align="left">
<table align="center">
<table align="right">

3.2.7 设置表格的（tr）标记行的属性

通过tr标记的align属性可以设置表格行内容的水平对齐方式

3.2.8 设置单元格的属性

3.2.9 表格单元格跨行、跨列属性

单元格跨行：使用单元格 d 标记的 rowspan 属性可以设置单元格跨行合并。

单元格跨列：使用单元格td 标记的 colspan 属性可以设置单元格跨列合并。

3.3 表格嵌套

表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。

<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>嵌套表格布局页面</title>
<style>
bodyl font-size:36px;
</style>
</head>
<body>
<h4 align="center">嵌套表格布局页面</h4>
<table width="660px'" border="1" align=" center'" bordercolor="#3333f">
<tr>
<td height=100">
<table width="100%" border="1" bordercolor="red">
<tr height="50" align="center">
<td rowspan="2" width="100">logo</td>
<td>广告条く/td>
</tr>
<tr height="50'" align=" center">
<td>导航</td>
</tr>
<Jtable>
</td>
</tr>
<tr>
<td height="300">
<table width='"100%" border='"I" bordercolor="#334199">
<tr align=" center>
<td height="300"width="30%“>左栏目</td>
<td height="300" width="70%“>正文内容</td>
</</table>
</td>
</tr>
<tr align=" center">
<td height="100">版权信息<td>
</tr>
</table>
</body>
</html>tr>

3.4 表单

HTMI中的表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成：一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输入信息，然后将这些信息提交给服务器；服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。

3.4.1 表单标记

表单form标记为成对标记，以<form>开始和</fom>结束。表单定义了采集数据的范
围，其所包含的数据内容将被完整地提交给服务器。

3.4.2 定义域和域标题

利用 fieldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset 标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend 标记为 fieldset 标记定义域标题。

3.4.3 表单信息输入

单行文本输入框：设置 input 标记的type 属性值为text，可以实现向表单中插人一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。

密码输入框：设置 input 标记的type 属性值为 password，可以实现向表单中插入一个密码输入框。密码输入框中可以输人任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“。”所取代，这样设计可以保障用户输入的密码不被泄露。

复选框：设置input 标记的type 属性值为 checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。

单选按钮：设置 input 标记的 type 属性值为 radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。

图像按钮：设置 input 标记的 type 属性值为 image，可以实现向表单中插入一个图像按钮、用户可利用图像按钮在网页中插入一张图像，通过src 属性加载图像。

提交按钮：设置 input 标记的 type 属性值为 submit，可以实现向表单中插人一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。

重置按钮：设置 input 标记的ype属性值为reset，可以实现向表单中插人一个重置按钮，重置期
用于将表单中所有的输入信息清空，然后让用户可以重新填写。

普通按钮：设置 input 标记的 type 属性值为 button，可以实现向表单中插入一个普通按钮。普通校纽在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。

文件选择框：设置 input 标记的 type 属性值为file，可以实现向表单中插入一个文件选择框。

隐藏框：设置 input 标记的type属性值为 hidden，可以实现向表单中插人一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。

3.4.4 多行文本输入框

textarea 标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息。而且可以换行，并将这些信息提交到服务器。

3.4.5 下拉列表框

下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用 select 和 option 标记来在表单中插入下拉菜单和列表项。

3.5 综合案例——表格与表单

1.维达工作室子页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>达维工作室——联系我们</title>
		<style type="text/css">
			.chu{
				font-weight: bold;
			}
			.zi1{
				font-family: "微软雅黑";
				font-size: 20px;
				font-weight: bold;
				color: #ED630A;
			}
			.zi2{
				font-family: "微软雅黑";
				font-weight: bold;
				color: #F60;
				text-decoration: underline;
			}
			.zibai{
				font-family: "微软雅黑";
				color: #FFF;
			}
			body{
				background-image: url(img/bj.jpg);
			}
		</style>
	</head>
	<body>
		<table width="1190" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td>
					<table width="1190" border="0" align="center" cellpadding="0" cellspacing="5">
						<tr>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF">
								< img src="img/logo.jpg" width="100" height="63"/></td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">网站首页></td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们></td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">团队合作></td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关作品></td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">设计理念></td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">人物介绍></td>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">联系我们></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" border="0" cellspacing="20" cellpadding="0">
						<tr>
							<td height="318">&nbsp;</td>
							<td width="420" valign="top">
								<table width="100%" border="0" cellspacing="0" cellpadding="20">
									<tr>
										<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
									</tr>
									<tr>
										<td height="196" bgcolor="#FFAF03">
              <p class="zibai">地址：广东省江门市XXXXXXXXX<br/>
																						 
                 电话：0750——XXXXXX<br/>
																						 
                  传真：0750——XXXXXX<br/>
																						 
                  QQ:12345678<br/>
																						 
                电子邮箱：<br/>
																						 
               123@163.com<br/>
																						 
                工作室网站：<br/>
																						 
                www.XXXX.com</p >
                                		</td>
									</tr>
						</table>
						</td>
		<td width="280" valign="top">
	<table width="100%" border="0" cellspacing="0" cellpadding="20">
		<tr>
		<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">关于我们</td>
	</tr>
	<tr>
	<td height="278" valign="top" bgcolor="#FC880D"><p class="zibai">达维工作室是专业从事互联网相关开发的公司。<br/>
	专门提供全方位的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br/>
				达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程......</p >
			<p class="zibai">&nbsp;</p >
				<p class="zibai chu">更多&gt;</p >
				</td>
					</tr>
			</table>
				</td>
		<td width="280">
		<table width="100%" border="0" cellspacing="0" cellpadding="20">
				<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">团队合作</td>
		</tr>
			<tr>
<td height="332" valign="top" bgcolor="#66A00E"><p class="zi2">我们的团队：</p >
		<p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需求。设计师创意的思维模式，提供最合适的设计方案。</p >
			<p class="zi2">我们的承诺：</p >
					<p class="zibai">本工作室设计与制作的网站均属原创、不套用网上的任何模板，根据每个公司特点，设计出属于客户......</p >
		<p class="zibai">&nbsp;</p >
		<p class="zibai chu">更多&gt;&gt;</p >
		</td>
								</tr>
										</table>
										<html>

2.用户注册表

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>用户注册信息</title>
		<style type="text/css">
		fieldset{
			width:700px;
		}
		</style>
		</head>
		<body>
			<form action="" method ="post" encdype=" mulipart/om- data" name=" forml" id="from1">
			<fieldset>
			<legend>用户注册信息</legend>
			<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td width="200" align="right">用户名：</td>
			<td><input type="text" name="texfield" id="textfield" /></td>
		</tr>
		<tr>
			<td width="200" align="right">密码：</td>
			<td><input type="password" mame="textfield2" id="textfield2"/></td>
		</tr>
		<tr>
			<td width="200" align="right">确认密码：</td>
			<td><input type="password" name= "textield3" id="textfield3"/></td>
		<tr>
		<tr>
			<td widh="200" align="right">性别：</td>
			<td><input name="radio" type="radio" id="radio" value="radio" checked= "checked"/>男
			<img src="img/Male.gif" width="22" heigh="21" dlign="absmidde" />
			<input type="radio" name="radio" id="radio2" value="radi2" />女
			<img src="img/Female.gif" width="23" heighr="21" align="abiniddle" /></td>
		</tr>
		<tr>
				<td width="200" align="right">出生年月：</td>
			<td><input name="textfield4" ype="text" id="toxtfield4" sive="12" />年
			<select name="select" id=" select">
			<option>l</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>S</option>
			<option>6</option>
			<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>10</option>
			<option>11</option>
			<option>12</option>
		</select>
				月</td>
		</td>
		<tr>
			<td width="200" align="right">业余爱好：</td>
			<td><input type="checkbox" name= "checkbox" id="checkbox1">看书
			<input type="checkbox" name= "checkbox2" id="checkbox2"/>上网
			<input type= "checkbox" name="checkbox3" id="checkbox3" />打球
		</td>
		</tr>
		<tr>
			<td width="200" align="right">相片：</td>
			<td height="25"><input type="file" name= "fileField" id=" ilefField" /></td>
		</td>
		<tr>
				<td width="200" align="right">意见或建议：</td>
			<td>
				<textarea name="textarea" id= "textarea cols="45" rows="S"></textarea>
			</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				<input type="submit" name= "button" id="button" value="提交"/>
				<input type="reset" name="button2" id="button2" value="重置"/>
			</td>
			</tr>
			</table>
			</fieldset>
			</form>
		</body>
	</html>