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

3.1 表格概述

表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，我网页内容的显示一目了然。表格除了用来显示数据外，还用于搭建网页的结构。几乎所HTML页面都或多或少地采用了表格。表格以简洁明了和高效快捷的方式将图片、文本、据和表单的元素有序地显示在页面上，从而可以呈现出漂亮的页面。表格在网页设计中能网页分成多个任意的矩形区域。

3.1.1 表格的结构

表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或
他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表 caption(3)
格等元素。表格中的内容按照相应的行或列进行分类和显示，如图3-1所示。

3.1.2 表格的基本语法

<table border="2px">
			<caption>23软件一班</caption>
			<tr>
				<td>1</td>
				<td>男</td>
				<td>张三</td>
			</tr>
			<tr>
				<td>1</td>
				<td>男</td>
				<td>8李四/td>
			</tr>
		</table>

3.2表格属性的设置

表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。表格标记的属性如表3-2所示。

3.2.1 表格边框属性

<table border="" bordercolor=""bordercolorlight= "" bordercolordark =" ">…</table>
(1) border属性。用于设置边框的粗细，单位是像素。
(2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和家色英文名称。
(3)bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。
(4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。宽度与高度属性

<table border="4px" bordercolor="green">
		<caption>23软件一班</caption>
			<tr align="center">
				<td>1</td>
				<td>男</td>
				<td>张三</td>
			</tr align="left">
			<tr>
				<td>1</td>
				<td>男</td>
				<td>李四</td>
			</tr>
		</table>

3.2.2 表格的宽度与高度属性：

通过设置width属性和height，属性可以设置表格的宽度和高度。
语法：
<table width="height="">…</table>
(1) width。其单位可以是长度单位或百分比，用于定义表格的宽度。
(2)height。其单位可以是长度单位或百分比，用于定义表格的高度。

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

<table border="4px" width="80" height="40">

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

设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为格增添背景图像效果，使表格更加美观。
语法：
<table bgcolor="" background="">…</table>
(1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。
(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。【例3.2】设置表格边框属性。

		<table border="4px" width="80" height="40" bgcolor="pink" background="img/1.2.jpg">

3.2.4 表格边框样式属性

设置表格标记中的fame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。

		<table frame="above" rules="cols">

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

设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部框之间的距离。
语法：
<table cellspacing="" cellpadding=""
</table>
(1) cellspacing。值的单位为像素或百分比，默认值为2px。
(2) cellpadding。值的单位为像素或百分比。

		<table cellspacing="40px" cellpadding="20px">

3.2.6 表格水平对齐属性

通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式，对齐方式有居左，居中，居右3种

语法：
<table align="leftl center I right">…</table>

说明：align属性的取值可以为left(默认居左)、center(居中)和right(居右)。

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

通过tr标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐，居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。

3.2.8 设置单元格属性

表格的列（td）标记的属性可以设置表格单元格的显示风格。td标记常用的属性如表3-6所示。

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

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

语法：
<td rowspan=”行数”>…</td>
说明：rowspan属性可以设置单元格跨行。通过 rowspan=" n”(n是正整数)，可以置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个日标记。
2.单元格跨列
使用单元格td标记的colspan属性可以设置单元格跨列合并。
语法：
ad colspan="列数”>…</td>
说明：colspan属性可以设置单元格跨列。通过colspan="n"(n是正整数)，可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个td标记。

3.3 表格嵌套

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

3.4 表单

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

3.4.1 表单标记

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

例3.9 表单的应用                                                                                   

<h3>输入课程成绩</h3>
				姓名:<input type="text"/> <br />
				网页设计:<input type="text" size="15"/> <br />
				数据结构:<input type="text" size="15" /><br /><br />

 

3.4.2定义域和域标题 

利用fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，Geldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果。或者可创建一个子表单来处理这些元素。legend标记为fieldset标记定义域标题。
语法：
<form>
<fieldset>
<legend alig="left I center I right">域标题内容</legend>
</fieldset>
</form>
说明：fieldset标记没有属性，是成对标记。legend标记必须位于fieldset标记内，也是成对标记：有一个对齐align属性，属性值分别为left，center和right。

代码如下：

<fieldset> <!--定义域-->
					<legend>个人成绩</legend> <!--域标题-->
				<h3>输入课程成绩</h3>
				姓名:<input type="text"/> <br />
				网页设计:<input type="text" size="15"/> <br />
				数据结构:<input type="text" size="15" /><br /><br />
				</fieldset>

3.4.3 表单信息输入

表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是input标记，可以输入一行信息。input标记是单个标记。
语法：
<input name=""type=""/>
说明：input标记的属性主要有name和type等，输入类型是由类型type属性定义的，type属性有很多不同的值，设置属性值不同，就会产生不同界面效果。input标记的属性、取值及说明如表3-8所示。

3.4.3.1 单行文本输入框

设置input标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。
语法：
<input name=""type="text"maxlength="" size="" value="" readonly/>

3.4.3.2 密码输入框

设置input标记的type属性值为password，可以实现向表单中插入一个密码输入框。密码输入框中可以输入任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“·”所取代，这样设计可以保障用户输入的密码不被泄露。
语法：
<input name=""type="password"maxlength=""size=""/>
说明：密码输入框的主要属性有name，maxlenth和size，取值及说明与单行文本输入框相同。

密码：<input  type="password" name="password"/><br />

3.4.3.3复选框 

设置 input标记的type属性值为checkbox，可以实现向表单中插入一个复选框，用户和用复选框在网页上设置多项选择。
语法：
<input name="" type="checkbox" value="" checked/>
说明：复选框的主要属性有name，value和checked，其中checked属性用于设置初始预选项。复选框的属性、取值及说明如表3-10所示。

爱好:
				<input type="checkbox" name="n1" value="sing"/ checked>唱歌 <!--checked是默认的功能-->
				<input type="checkbox" name="n2" value="dance"/ >跳舞
				<input type="checkbox" name="n3" value="basketball"/ >篮球
				<input type="checkbox" name="n4" value="football"/ >足球 <!--复选框-->
				<br />

 

3.4.3.4 单选按钮 

设置input标记的type属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法：
<input name="" type="radio" value= " " checked/>
说明：单选按钮的属性有 name， vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同。

性别:
				<input type="radio" name="sex" value="male"/>男
				<input type="radio" name="sex" value="female"/>女<!--单选框-->
				<br />

3.4.3.5 图像按钮

设置input标记的type属性值为image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插入一张图像，通过src属性加载图像。
语法：
<input name=""type="image" src="" width=""height=""/>

<input type="image" name="start" src="img/c.1.png"/>

 

3.4.3.6提交按钮 

设置 input标记的type属性值为submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。
语法：
<input name="" type="submit"value="提交"/>

<input type="submit" value="成绩提交"/> <!--提交按钮submit-->

3.4.3.7重置按钮

<input type="reset" value="成绩重置"/><br /> <!--重置按钮-->

3.4.3.8 普通按钮

<input type="button" value="普通按钮" onclick="javascript:alert('注册新用户')"/><br /> <!--普通按钮-->

 

3.4.3.9文件选择框 

<input type="file" name="选择文件" /><br /><!--文件选择框-->

3.4.3.10隐藏框

<input type="hidden" name="月" value="12"/><!--隐藏框，用户不需要输入-->
				<br />

3.4.4 多行文本输入框

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

语法：
<textarea name=""rows=""cols=""wrap=""/>初始信息内容</textarea>
说明：多行文本输入框 textarea标记是成对标记，其主要属性有name，rows，colswrap等，其属性、取值及说明如表3-15所示。默认情况下，当用户在文本区域中输入文本后，浏览器会将它们按照输入时的状态发送给服务器。只有在用户按下Enter键的地方生成换行。

请输入您的宝贵意见:
				<textarea name="多行文本框" rows="4" cols="50"></textarea><!--多行文本框，rows是可见行数，cols是可见宽度-->
				<br />

3.4.5 下拉列表框 

下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用 seleet和option标记来在表单中插入下拉菜单和列表项。
语法：
<select name="" size="" multiple>
<option value="" selected>文字信息1</ option>
<option value="">文字信息2</option>
</select>

请选择课程:
				<select name="subject" multiple> <!--multiple是支持多选的功能-->
					<option value="s1" selected>前端</option> 
					<option value="s2">后端</option>
					<option value="s3">测试</option> <!--下拉列表-->
				</select>

3.5 综合案例

案例一

<!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" alt="" width="100" height="63"/>
							</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">网站首页</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">关于我们</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">团队合作</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">相关作品</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">设计理念</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">人物介绍</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">联系我们</td>
							
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" border="0" cellspacing="20" cellpadding="0">
						<tr>
							<td height="318">&nbsp;</td>
							<td width="280" valign="top">
								<table width="100%" border="0" cellspacing="0" cellpadding="20">
									<tr>
										<td height="30" aligh="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 calss="zibai">&nbsp;</p>
											<p calss="zibai chu"><a href="#">更多&gt;&gt;</a></p>
										</td>
									</tr>
								</table>
							</td>
							<td width="280">
								<table widht="100%" border="0" cellspacing="0" cellpadding="20">
									<tr>
										<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"><a href="#">更多&gt;&gt;</a></p>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

案例二 

<!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" alt="" width="100" height="63"/>
							</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">网站首页</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">关于我们</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">团队合作</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">相关作品</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">设计理念</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">人物介绍</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">联系我们</td>
							
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" border="0" cellspacing="20" cellpadding="0">
						<tr>
							<td height="318">&nbsp;</td>
							<td width="280" valign="top">
								<table width="100%" border="0" cellspacing="0" cellpadding="20">
									<tr>
										<td height="30" aligh="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 calss="zibai">&nbsp;</p>
											<p calss="zibai chu"><a href="#">更多&gt;&gt;</a></p>
										</td>
									</tr>
								</table>
							</td>
							<td width="280">
								<table widht="100%" border="0" cellspacing="0" cellpadding="20">
									<tr>
										<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"><a href="#">更多&gt;&gt;</a></p>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>