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

3.1 表格概述

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

3.1.1 表格的结构

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

3.1.2 表格的基本语法

在HTML中,常用表格主要通过5个标记来构成:<table>，<caption>，<th>，<tr>和< tb>如下表：

常用表格标记形式及说明表

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

 (1)table 标记是成对标记，<table>表示表格开始，</table>表示表格结束。
(2)caption标记是成对标记，<caption>表示标题开始，</caption>表示标题结束。使用cpion标记可以给表格添加标题，该标题应位于 table 标记与t 标记之间的位置。(3)t(Table Row)标记是成对标记，<t>表示行开始，</t>表示行结束。(4)山(Table Heading表头)标记是成对标记，<t>表示表头开始，</t>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明表头文字内容一般居中、加粗显示。
(5)td(Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束表头可以用t 标记定义，也可以用td 标记定义，但<td></td>两标记之间的内容不自动中、不加粗。
在一个表格中，可以插人多个t标记，表示多行，一组<tr></tr>标记表示插人一行-行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等。

3.2 表格属性的设置

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

表格标记的属性、取值及说明表

属性	取值	说明
align	lef l center f righi	规定表格相对周围元素的对齐方式
bgcolor	#rggbbl colomame b(r%,g%,b%)rgb(r, gg,bb)	规定表格的背景颜色
border	pixels	规定表格边框的宽度
cellpadding	pixels 1 %	规定单元边沿与其内容之间的空白
cellspacing	pixels 1 %	规定单元格之间的空白
frame	above i belowl hsides l vsides l lhs l rhs l border l void	规定外侧边框的哪个部分是可见的
rules	none l all l rows f colslgroups	规定内侧边框的哪个部分是可见的
heighit	% 1 pixels	规定表格的高度
width	% 1 pixels	规定表格的宽度

3.2.1 表格边框属性

 设置表格标记中的边框属性可以改变表格的外观。表格边框属性如表3-3所示。
中的属性同样适用于单元格。

表格边框属性说明表

边框属性	说 明	边框属性	说 明
borde	表示表格边框粗细	bordercolorlight	表示表格亮边框颜色
bordercolor	表示表格边框颜色	bordercolordark	表示表格暗边形颜色

3.2.2 表格的宽度和高度属性

<!--表格宽度和高度属性-->
		<table width="200px" height="150px"><!--把所有内容包起来-->
		        <caption>23级软件一班</caption><!--表格标题-->  
				<tr><!--表头，表头内的标签用<th>-->
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>										
				<tr>
					<td>1</td>
					<td>熊慧娟</td>
					<td>1班</td>
				</tr>
				<tr>
					<td>1</td>
					<td>叶里文</td>
					<td>1班</td>
				</tr>

	<!--百分比-->
		<table width="20%" heigth="20%"><!--把所有内容包起来-->
		        <caption>23级软件一班</caption><!--表格标题-->  
				<tr><!--表头，表头内的标签用<th>-->
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>										
				<tr>
					<td>1</td>
					<td>熊慧娟</td>
					<td>1班</td>
				</tr>
				<tr>
					<td>1</td>
					<td>叶里文</td>
					<td>1班</td>
				</tr>

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

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

 背景颜色：

<table bgcolor="00fffff"><!--把所有内容包起来-->
		        <caption>23级软件一班</caption><!--表格标题-->  
				<tr><!--表头，表头内的标签用<th>-->
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>										
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>1班</td>
				</tr>
				<tr>
					<td>1</td>
					<td>李四</td>
					<td>1班</td>
				</tr>		

<table background="img/学校.png"><!--设置背景-->
		        <caption>23级软件一班</caption><!--表格标题-->  
				<tr><!--表头，表头内的标签用<th>-->
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>										
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>1班</td>
				</tr>
				<tr>
					<td>1</td>
					<td>李四</td>
					<td>1班</td>
				</tr>	

背景图像： 

3.2.4 表格边框样式属性 

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

<table  frame="hsides" rules="all"><!--把所有内容包起来-->
		        <caption>23级软件一班</caption><!--表格标题-->  
				<tr><!--表头，表头内的标签用<th>-->
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>										
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>1班</td>
				</tr>
				<tr>
					<td>1</td>
					<td>李四</td>
					<td>1班</td>
				</tr>
		

 3.2.6 表格水平对齐属性

 居中对其：

<table align="center">
		        <caption>23级软件一班</caption><!--表格标题-->  
				<tr><!--表头，表头内的标签用<th>-->
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>										
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>1班</td>
				</tr>
				<tr>
					<td>1</td>
					<td>李四</td>
					<td>1班</td>
				</tr>	
		</table>			

<table align="right">
		        <caption>23级软件一班</caption><!--表格标题-->  
				<tr><!--表头，表头内的标签用<th>-->
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>										
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>1班</td>
				</tr>
				<tr>
					<td>1</td>
					<td>李四</td>
					<td>1班</td>
				 </tr>	
		</table>

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

<table border="2px" width="300px" hight="152px">
		        <caption>23级软件一班</caption><!--表格标题-->  
				<tr align="center" valign="button"><!--align是水平对其方式，valign是垂直对其方式-->
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>										
				<tr align="right" valign="top">
					<td>1</td>
					<td>张三</td>
					<td>1班</td>
				</tr>
				<tr valign="middle"> 
					<td>1</td>
					<td>李四</td>
					<td>1班</td>
				</tr>
		</table>

3.2.8 设置单元格的属性

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

<!--合并单元格-->
		<h3 align="center">设置单元格跨列、跨行属性</h3>
		<table border=" 1" width=" 500px" align="center" bordercolor="#3366ff">
		<caption>专业研讨会日程安排</caption>
		<tr align= " center" >
			<td colspan="2">上午</td>
			<td colspan="2">下午</td>
		</tr>
		<tr >
			<td>8:00-10:00</td>	
			<td>10:10-12:00</td>
			<td>14:00-16:00</td>
			<td>16:10-18:00</td>						
		</tr>
		<tr align=" center" >
			<td rowspan="2">学校领导讲话 </td>
			<td>大会主题报告</td>		
			<td>行业企业专题报告</td>
   		    <td rowspan="2">总结报告</td>
		</tr>
		<tr align=" center"' >
			<td>专家报告</td>
			<td>分组讨论</td>	
		</tr>
		<tr align =" center" >
			<td colspan="4">全天参观人工智能实训中心</td>
		</tr>
		</table>		

 
3.2.9.1 单元格跨行

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

语法:
<td rowspan="行数">…</td>
说明:rowspan属性可以设置单元格跨行。通过rowspan="n"(n是正整数),可置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义td标记。

3.2.9.2 单元格跨列

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

3.3 表格嵌套

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

3.4 表单

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

3.4.1 表单标记

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

3.4.2 定义域和域标题

		<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
			<!--表单的信息输入-->
			<fieldset>
				<legend>个人信息</legend>
				用户名：<input type="text" name="user"/>
				用户类型：<input type="txex" name="usertype" value="普通用户" readonly/>
				密码：<input type="password" name="password"/>
		</form>										
							
		<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
			<!--表单的信息输入-->
			姓名：<input type="text" name="name"/>
			<!--单选按钮-->
			性别：
			<input type="radio" name="r1" value="male"/>男
			<input type="radio" name="r1" value="female"/>女
			<br/>
			爱好：<!--复选框-->
			<input type="checkbox" name="c1" value="sing" checked/>唱歌
			<input type="checkbox" name="c2" value="dance" />跳舞
			<input type="checkbox" name="c3" value="basketball" />打篮球
			<input type="checkbox" name="c4" value="score" />踢足球
			<input type="checkbox" name="c5" value="run" />长跑
			<br/>
			<!--图像按钮-->
			<input type="image" name="start" src="img/start.png"/>
			<!--提交按钮-->
			<input type="submit" name="submit" value="登录"/>
			<!--重置按钮-->
			<input type="reset" name="reset" />
			<!--普通按钮-->
			<input type="button" name="button" value="注册" onclick="javascript:alert('注册新用户')"/>
			<br/>
			<!--文件选择框-->
			<input type="file" name="file">
			</fieldset>
			<fieldset>
				<legend>其他信息</legend>
			<!--隐藏框-->
			<input name="" type="hidden" value=""/><br/>
			<!--多行文本框-->
			请输入您的宝贵意见：
			<textarea name="info" rows="4" cols="50"/></textarea>
			<br/>
			<input type="hidden" name="" value=""/>
			<!--下拉-->
			请选择课程
			<select name="abc">
				<option value="s1">前端</option>
				<option value="s1">后端</option>
				<option value="s1">运维</option>
				<option value="s1">测试</option>
			</fieldset>
		</form>

3.4.3 表单信息输入

表单的主要功能是为用户提供输人信息的接口，将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是imput 标记，可以输入一行信息。input 标记是单个标记。

语法:
<input name= " " type=" "/>说明:input 标记的属性主要有name 和type 等，输人类型是由类型 type 属性定义的type 属性有很多不同的值，设置属性值不同，就会产生不同界面效果。input 标记的属性取值及说明：

表单信息输入标记属性、取值及说明

属性	取值	说明
name	name	定义input 元素的名称
type	text   l   password   l   radiocheckboximage   l   submitlreset   l   buttonlfilelhidden	规定 input 元素的类型。text 为单行文本输人框，password 为密码输入框，checkbox为复选框，radio为单选按钮，image为图像按钮，submit 为提交按钮，reset为重置按钮，button为普通按钮fle 为文件选择框，hidden 为隐藏框 1.单行文本输入框 设置 input 标记的 type 属性值为 text，可以实现向表单

3.4.3.1 单行文本输入框

<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
	用户名：<input type="text" name="user"/>
	用户类型：<input type="text" name="usertype" value="普通用户" readonly/>
</form>

3.4.3.2 密码输入框

<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
	密码：<input type="password" name="password"/>
</form>

3.4.3.3 复选框

<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
	爱好：
	<input type="checkbox" name="n1" value="sing" checked/>唱歌
	<input type="checkbox" name="n2" value="dance"/>跳舞
	<input type="checkbox" name="n3" value="basketball"/>打篮球
	<input type="checkbox" name="n4" value="score"/>踢足球
	<input type="checkbox" name="n5" value="run"/>长跑
</form>

3.4.3.4 单选按钮

性别：
			<input type="radio" name="r1" value="male"/>男
			<input type="radio" name="r1" value="female"/>女

3.4.3.5 图像按钮

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

3.4.3.6 提交按钮

<input type="submit" name="submit" value="登录">

3.4.3.7 重置按钮

<input type="reset" name="reset" />

3.4.3.8 普通按钮

<input type="button" name="button" value="注册" onclick="javascript:alert('注册新用户')">

单击后会弹框 

3.4.3.9 文件选择框

<input type="file" name="file">

点击后可选择文件

 

3.4.3.10 隐藏框

<input type="hidden" name="" value=""/>

3.4.4 多行文本输入框

请输入您的宝贵意见
<textarea name="info" rows="4" cols="50"></textarea>

3.4.5 下拉列表框

<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
	<br/>
	请选择课程：
	<select name="job">
		<option value="s1">前端</option>
		<option value="s2">后端</option>
		<option value="s3">运维</option>
		<option value="s4">测试</option>
	</select>
</form>

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

1.
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>达维工作室---联系我们</title>
		<style type="text/css">
			.chu{
				font-weight:bold;
			}
			.zi1{
				font-weight:微软雅黑;
				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="O" 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" 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 widih="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="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="zil">关于我们</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;&gt;</p>
			</td>
			</tr>
			</table>
			</td>
			<td width="280">
			  <table width =" 100%" border="0" cellspacing ="0" cellpadding ="20">
			<tr>
			  <td height="30" align="center" bgcolor="#FFFFFF" class="zil">团队合作</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>
			</td>
			</tr>
		</table>
			</td>
			</tr>
		</table>
	</body>
</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" enctype="multipart/form-data" name="forml" id="forml">
		<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="textfield" id="textfield"/></td>
	</tr>
	<tr>
		<td width="200" align="right">密码：</td>
		<td><input type="password" name="textfield2" id="textfield2" /></td>
	</tr>
	<tr>
		<td width="200" align="right">确认密码：</td>
		<td><input type="password" name="textfield3" id="textfield3"/></td>
		</tr>
	<tr>
		<td width="200" align="right">性别：</td>
		<td><input name="radio" type="radio" id="radio" value="radio" checked="checked"/>
		男<img src="img/Male.gif" width="22" height="21" align="absmiddle"/>
		<input type="radio" name="radio" id="radio2" value="radio2"/>
		女<img src="img/Female.gif" width="23" height="21" align="absmiddle"/></td>
	</tr>
	<tr>
	<td width="200" align="right">出生年月：</td>
	<td><input name="textfield4" type="text" id="textfield4" size="12"/>年
	<select name="select" id="select">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	<option>8</option>
	<option>9</option>
	<option>10</option>
	<option>11</option>
	<option>12</option>
	</select>
		月</td>
	</tr>
	<tr>
	<td width="200" align="right">业余爱好：</td>
	<td><input type="checkbox" name="checkbox" id="checkbox"/>看书
		<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="fileField"/></td>
	</tr>
	<tr>
		<td width="200" align="right">意见或建议；</td>
		<td>
		<textarea name="textarea" id="textarea" cols="45" rows="5"></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>