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

最新推荐文章于 2024-09-29 21:54:55 发布

莹之夏

最新推荐文章于 2024-09-29 21:54:55 发布

阅读量680

点赞数 21

文章标签： css html 前端

本文链接：https://blog.csdn.net/2403_87158639/article/details/142351063

版权

3.1 表格概述

3.1.1 表格的结构

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

3.1.2 表格的基本语法

3.2 表格属性的设置

3.2.1 表格边框属性

3.2.2 表格的宽度和高度属性

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

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

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

设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background 属性可以为表格增添背景图像效果，使表格更加美观。
语法:
<table bgcolor=" " background="">..</table>
(1) bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。

(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table border="3px" bordercolor="#0000ff" width="200px" height="100px"
		    frame="hsides" rules="a11">
			<caption>23软件技术3班学生名单</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 border="3px" bordercolor="#0000ff" width="200px" height="100px"background="img/school">
			<caption>23软件技术3班学生名单</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 border="3px" bordercolor="#0000ff" width="1000px" height="800px" background="img/school.png">
					<caption>23软件技术3班学生名单</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 border="3px" bordercolor="#0000ff" width="200px" height="100px" bgcolor="#00aaff">
							<caption>23软件技术3班学生名单</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>
	</body>
</html>

3.2.4 表格边框样式属性

设置表格标记中的fame 属性可以改变表格边框的样式;设置表格标记中的rules属性可以改变表格内部边框的样式。
说明:frame 和 rules属性值及说明如表3-4所示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table border="3px" bordercolor="#0000ff" width="200px" height="100px"
		    frame="hsides" rules="a11">
			<caption>23软件技术3班学生名单</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>
        </body>
        </html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="3px" bordercolor="#0000ff" width="200px" height="100px" bgcolor="#00aaff">
					<caption>23软件技术3班学生名单</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>
	</body>
</html>

3.2.6 表格水平对齐属性

通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左、居中、居右3种。
语法:
<table align="left| center | right" >.….</table>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="2px" cellspading="10px">
		<caption>23软件技术3班学生名单</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 align="center">
		<caption>23软件技术3班学生名单</caption>
			<tr align="left">
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr align="right">
				<td>1</td>
				<td>刘易</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>罗英</td>
				<td>女</td>
			</tr>
		</table>
	</body>
</html>

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

表格行tr标记的属性用于设置表格某一行的样式，其属性设置如表3-5所示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="2px" width="200px" height="150px">
		<caption>23软件技术3班学生名单</caption>
			<tr align="left" valign="top">
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr align="center" valign="middle">
				<td>1</td>
				<td align="right">刘易</td>
				<td>男</td>
			</tr>
			<tr align="right"valign="bottom">
				<td>2</td>
				<td>罗英</td>
				<td>女</td>
			</tr>
		</table>
	</body>
</html>

3.2.8 设置单元格的属性

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

3.2.9.1 单元格跨行跨列

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置单元格跨列、跨行属性</title></head><body>
	</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>
		</td>
		<tr align="center">
		<td colspan="4">全天参观人工智能实训中心</td>	
		</tr>
		</table>
	</body>
</html>

3.3 表格嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width=" 700" height=" 150" border="1">
		<caption><h2>18软件技术7班课程表</h2></caption><tr>
		<th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr>
		<td>第 1-2节</td><td>数据库</td><td>C 语言</td><td>网页设计</td><td>java</td><td>php</td></tr><tr>
		<td>第 3-4节</td><td>php</td>
		<td>计算机数学</td><1d></td><td></td>
		<td>C语言</td></tr>	
		<tr>
		<td>第5-6节</td><td>java</td><td></td><td></td>
		<td>数据结构</td><td>网页设计</td></tr><tr>
		<td>第7-8节</td><td>心理咨询</td><td></td>
		<td>数据库</td><td></1d><td></td></tr>
		</table>
	</body>
</html>

3.4 表单

3.4.1 表单标记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title></head><body>
	</head>
	<body>
		<form>
			 用户名:<input type="text" name="user"/>
		</form>
	</body>
</html>

3.4.2 定义域和域标题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title></head><body>
	</head>
	<body>
		<form>
			 用户名:<input type="text" name="user"/>
		</form>
		
		<form>
			 用户名:<input type="text" name="user"/>
			 密码:<input type="password" name="password"/>
		</form>
	</body>
</html>

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

3.4.3.2 密码输入框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title></head><body>
	</head>
	<body>
		<form>
			 用户名:<input type="text" name="user"/>
			 密码:<input type="password" name="password"/>
		</form>
	</body>
</html>

3.4.3.3 复选框

3.4.3.4 单选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title></head><body>
	</head>
	<body>
		<form>
			 姓名:<input type="text" name="name"/>
			 爱好:
			 <input type="checkbox" name="n1" value="pating" checked/>画画
			 <input type="checkbox" name="n2" value="sing"/>唱歌
			 <input type="checkbox" name="n3" value="dance"/>跳舞
			 <input type="checkbox" name="n4" value="football"/>打足球
		</form>
		
		<form>
			 姓名:<input type="text" name="name"/>
			 性别:
			 <input type="radio" name="sex" value="male" />男性
			 <input type="radio" name="sex" value="female" checked/>女性
			 <br/>
			 爱好:
			 <input type="checkbox" name="n1" value="pating" checked/>画画
			 <input type="checkbox" name="n2" value="sing"/>唱歌
			 <input type="checkbox" name="n3" value="dance"/>跳舞
			 <input type="checkbox" name="n4" value="football"/>打足球
		</form>
		
	</body>
</html>

3.4.3.5 图像按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title></head><body>
	</head>
	<body>
		<form>
		<input type="image"	name="start" src="img/start.jpg"/>
		</form>
	</body>
</html>

3.4.3.6 提交按钮

设置 input 标记的type属性值为 submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。
语法:
<input name=" " type=" submit" value="提交"/>
说明:提交按钮的属性主要有name 和value，其属性、取值及说明如表3-12所示。

3.4.3.7 重置按钮

设置input 标记的type 属性值为reset，可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法:
<input name=" "type=" reset" value=""/>
说明:重置按钮的属性主要有name 和value，其属性、取值及说明与提交按钮的相同。

3.4.3.8 普通按钮

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

说明:普通按钮的属性有name,value 和onclick，其属性、取值及说明如表3-13所示。

3.4.3.9 文件选择框

设置input标记的type 属性值为file，可以实现向表单中插入一个文件选择框。语法:
<input name=" "type="file" value=""/>
说明:
name，定义input 标记的名称。页面上会自动添加一个文本输人框和一个“浏览.按钮。单击“浏览…”按钮可以从“选择要加载的文件”对话框选择某一个文件，然后自动将文件名称回填到文本输入框中。

3.4.3.10 隐藏框

设置input标记的type属性值为hidden，可以实现向表单中插入一个隐藏框，用户提表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
语法:
<input name=" " type="hidden" value=""/>
说明:隐藏框的属性有name 和 value,其属性、取值及说明

3.4.4 多行文本输入框

3.4.5 下拉列表框

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title></title>
		</head>
		<body>
	<form>
					  请选择您的课程:
					  <select name="course" multiple>
						  <option value="">网页</option>
						  <option value="">java</option>
						  <option value="">ps</option>
						  <option value="">安卓</option>
						  <option value="">网络</option>
					  </select>
				  </form>
				  佐证材料:
				  	 <input type="file" name="file"/>
				  					 <br />
				  					 请输入您的宝贵意见:
				  					 <textarea name="info" rows="4" cols="50">  </textarea>
				  </form>
				  
				  <form>
				  					  请选择您的课程:
				  					  <select name="course" multiple>
				  						  <option value="">网页</option>
				  						  <option value="">java</option>
				  						  <option value="">ps</option>
				  						  <option value="">安卓</option>
				  						  <option value="">网络</option>
				  					  </select>
				  </form>
				  <fieldset>
					  <legend>个人信息</legend>
				  	 姓名:<input type="text" name="name"/>
				  	 性别:
				  	 <input type="radio" name="sex" value="male" />男性
				  	 <input type="radio" name="sex" value="female" checked/>女性
				  	 <br/>
				  	 爱好:
				  	 <input type="checkbox" name="n1" value="pating" checked/>画画
				  	 <input type="checkbox" name="n2" value="sing"/>唱歌
				  	 <input type="checkbox" name="n3" value="dance"/>跳舞
				  	 <input type="checkbox" name="n4" value="football"/>打足球
				  	 <br/>
				  	
	</body>
</html>

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


		<!DOCTYPE html>
		<html>
		   <head> 
		     <meta charset="UTF-8">
		     <meta name="viewport" content="width=device-width, initial-scale=1.0">
		     <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/背景.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" 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="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="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"><a href="#">更多&gt;&gt;</a></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="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" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>用户注册信息</title>
		<style type="text/css">
			fieldset{
				width: 700px;
			}
		</style>
		</head>
		<body>
			<form action="" method="post" enctype="multipart/form-data" name="form" id="form">  
			    <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="radio" name="radio" id="radio1" value="radio" checked="checked" />  
			                    男<img src="img/Male.gif" width="22" height="21" align="absmiddle"/> 
			                    <input type="radio" name="radio" id="radio2" value="radio" />  
			                    女<img src="img/Female.gif" width="23" height="21" align="absmiddle"/>
			                </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 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" />  
			                    <label for="checkbox">看书</label>  
			                    <input type="checkbox" name="checkbox2" id="checkbox2" />  
			                    <label for="checkbox2">上网</label>  
			                    <input type="checkbox" name="checkbox3" id="checkbox3" />  
			                    <label for="checkbox3">打球</label>  
			                </td>  
			            </tr>  
			            <tr>  
			                <td width="200" align="right">相片：</td>  
			                <td><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>