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

会飞的郁金香

已于 2024-09-27 14:56:58 修改

阅读量486

点赞数 8

文章标签： css html 前端

于 2024-09-26 23:23:08 首次发布

本文链接：https://blog.csdn.net/2401_87165094/article/details/142371542

版权

3.1 表格概述

表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然，还可以搭建网页的结构。

3.1.1 表格的结构

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

3.1.2 表格的基本语法

标记形式：

<table></table>表格标记
<caption></caption>表格标题标记
<th></th>表格表头标记（默认加粗）
<tr></tr>表格的行标记
<td></td>表格的列标记

<table>
			<caption>23软件二班名单</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 表格属性的设置

属性bgcolor：规定表格的背景颜色
属性border：规定表格边框的宽度（单位：px）
属性cellpadding：规定单元边沿与其内容之间的空白（%|px）
属性cellspacing：规定单元格之间的空白（%|px）
属性frame：规定外侧边框的哪个部分是可见的
属性rules：规定内侧边框的哪个部分是可见的
属性height：规定表格的高度（%|px）
属性weight：规定表格的宽度（%|px）

<table frame="hsides" rules="all">
			<caption>23软件二班名单</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.1 表格边框属性

<table border="3px">
			<caption>23软件二班名单</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.2 表格的宽度和高度属性

<table width="20%" height="150px">
			<caption>23软件二班名单</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 表格背景颜色与表格图像属性

<body>
			<table background="img/school.jpg">
				<caption>23软件二班名单</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.4 表格边框样式属性

语法：<table frame=" " rules=" ">.....内容.....</table>

属性表如下：

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

设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格把内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。间距是格子与格子之间的距离，边距是内容与格子的距离。

语法：

<table cellspacing=" " cellpadding=" "></table>

cellspacing。值单位为像素或百分比，默认值为2px。
cellpadding。值单位为像素或百分比。

示例：

<table cellspacing="10px" border="2px">
				<caption>23软件二班名单</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>
			<table cellpadding="10px" border="2px">
				<caption>23软件二班名单</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.6 表格水平对齐属性

对齐方式align属性语法：

<table align="left | center | right">...</table>

<table border="2px" width="200px" height="150px">
				<caption>23软件二班名单</caption>
				<tr align="left" valign="top">
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>
				<tr align="center">
					<td>1</td>
					<td align="righ">张三</td>
					<td>女</td>
				</tr>
				<tr align="right">
					<td>2</td>
					<td>李四</td>
					<td>男</td>
				</tr>
			</table>

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

标题行标记的属性用于设置表格某一行的样式。属性如下

属性align：行内容水平对齐
属性valign：行内容垂直对齐
属性bgcolor：行的背景颜色
属性bordercolor：行的边框颜色

<table border="2px" width="200px" height="150px">
				<caption>23软件二班名单</caption>
				<tr align="left" valign="top">
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>
				<tr align="center" valign="middle">
					<td>1</td>
					<td align="righ" valign="bottom" bgcolor="#ff0000">张三</td>
					<td>女</td>
				</tr>
				<tr align="right" valign="bottom">
					<td>2</td>
					<td>李四</td>
					<td>男</td>
				</tr>
			</table>

3.2.8 设置单元格的属性

表格的列td

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

3.2.9.1 单元格跨行

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

语法：<td rowspan="行数">...</td>

3.2.9.2 单元格跨列

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

语法：<td colspan="列数">...</td>

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置单元格跨列、跨行属性</title>
	</head>
	<body>
		<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>
	</body>
</html>

3.3 表格嵌套

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

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>嵌套表格布局页面</title>
		<style>
			body{font-size:36px;}
		</style>
	</head>
	<body>
		<h4 align="center">嵌套表格布局页面</h4>
		<table width="660px" border="1" align="center" bordercolor="#3333ff">
			<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>
					</table>
				</td>
			</tr>
			<tr>
				<td height="300">
					<table width="100%" border="1" bordercolor="#33ff99">
						<tr align="center">
							<td height="300" width="30%">左栏目</td>
							<td height="300" width="70%">正文内容</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr align="center">
				<td height="100">版权信息</td>
			</tr>
		</table>
	</body>
</html>

3.4 表单

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

3.4.1 表单标记

表单form标记为成对标记，以<form>开始和</from>结束。

语法：

<form method="post" action=" ">
           <input type="text" name=" "/>
           <textarea name="" rows="" cols="">......</textarea>
           <select name="">
               <option value="" selected></option>
               <option value=""></option>
           </select>
</form>

3.4.2 定义域和域标题

利用fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们。legend标记为fieldset标记定义域标题。

语法：

<form>
               <fieldset>
                   <legend alig="left | center | right">域标题内容</legend>
               </fieldset>

</form>

<form>
				<fieldset>
					<legend align="center">个人信息</legend>
					姓名：<input type="text" name="name"/>
					爱好：
					<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="run"/>长跑
				</fieldset>
				<fieldset>
					<legend align="center">教学评价</legend>
					请选择课程：
					<select multiple>
						<option name="s">网页</option>
						<option name="s">ps</option>
						<option name="s">安卓</option>=
						<option name="s">java</option>
						<option name="s">网络</option>
					</select>
					请输入您的宝贵意见：
					<textarea rows="4" cols="30"></textarea>
				</fieldset>
			</form>

3.4.3 表单信息输入

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

语法：<input name="" type=""/>

说明：input标记属性主要有name和type等，输入类型是由类型type属性定义的type属性有很多不同的值，设置的值不同，就会产生不同的页面效果。

3.4.3.1 单行文本输入框

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

语法：<input name="" type="" maxlength="" size="" value="" readonly/>

示例：

<form>
			用户名：<input type="text" name="user"/>
</form>

3.4.3.2 密码输入框

设置input标记的type属性值为password，可以实现向表单中插入一个密码输入框。这样设计可以保障用户输入的密码不被泄露。

语法：<input name="" type="password" maxlength="" size=""/>

<form>
		用户名：<input type="text" name="user"/>
		密码：<input type="password" name="password"/>
</form>

3.4.3.3 复选框

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

语法：<input name="" type="checkbox" value="checked"/>

说明：复选框的主要属性有name，value和checked，其中checked属性默认被选中。

3.4.3.4 单选按钮

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

语法：<input name="" type="radio" value="" checked/>

单选按钮的属性有name，vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同。

示例：

<form>
		姓名：<input type="text" name="name"/>
		爱好：
		<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="run"/>长跑
</form>

3.4.3.5 图像按钮

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

语法：<input name="" type="image" src="" width="" height=""/>

<form>
		<input type="image" src="img/start.jpg"/>
</form>

3.4.3.6 提交按钮

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

语法：<input name="" type="submit" value="提交"/>

<form>
		用户名：<input type="text" name="user"/>
		密码：<input type="password" name="password"/>
		<br />
		<input type="submit" value="登录"/>
</form>

3.4.3.7 重置按钮

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

语法：<input name="" type="reset" value=""/>

<form>
		用户名：<input type="text" name="user"/>
		密码：<input type="password" name="password"/>
		<br />
		<input type="submit" value="登录"/>
		<input type="reset"/>
</form>

3.4.3.8 普通按钮

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

语法：<input name="" type="button" value=""/>

<form>
		用户名：<input type="text" name="user"/>
		密码：<input type="password" name="password"/>
		<br />
		<input type="submit" value="登录"/>
		<input type="reset"/>
		<input type="button" value="注册" onclick="JavaScript:alert('注册新用户')"/>
</form>

3.4.3.9 文件选择框

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

语法:<input name=" " type=" file" value =" "/>

<form>
		用户名：<input type="text" name="user"/>
		性别：
		<input type="radio" name="sex" value="male" checked/>男
		<input type="radio" name="sex" value="female"/>女
		爱好：
		<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="run"/>长跑
		<br />
		请选择佐证材料：<input type="file"/>
</form>

3.4.3.10 隐藏框

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

语法：<input name="" type="hidden" value=""/>

<form>
		<input type="hidden" name="abc" value="123"/>
</form>

3.4.4 多行文本输入框

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

语法：<textarea name="" rows="" wrap=""/>初始信息内容</textarea>

<form>
	请输入您的宝贵意见：
	<textarea rows="4" cols="30"></textarea>
</form>

3.4.5 下拉列表框

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

语法：

<select name=" " size=" " multiple>
<option value=""selected>文字信息1</ option>
<option value="">文字信息2</option>

........

</select>

说明：select标记是成对标记，option标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有name,size 和 multiple（多选）ctri+选中即为多选等属性。option 标记有 value 和 selected 等属性。select标记与option 标记必须配合使用。每一选项必须指定一个显示的文本和一个value值，显示文本通常附在 option 标记后面。

<form>
		请选择课程：
		<select multiple>
			<option name="s">网页</option>
			<option name="s">ps</option>
			<option name="s">安卓</option>=
			<option name="s">java</option>
			<option name="s">网络</option>
		</select>
		请输入您的宝贵意见：
		<textarea rows="4" cols="30"></textarea>
</form>

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;
			}
			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>

<!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 =" form1" id ="form1">
			<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>