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

易个程序员

已于 2024-10-04 19:18:49 修改

阅读量773

点赞数 27

文章标签：交互 html 前端

于 2024-09-24 20:24:38 首次发布

本文链接：https://blog.csdn.net/songboy1/article/details/142497577

版权

3.1表格概述

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

3.1.1 表格的结构

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

3.1.2 表格的基本语法

在HTML中，常用表格主要通过5个标记来构成:<table>，<caption>，<h>，<t>和<td>，如下表

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

语法：<table>
                <caption>表格标题</caption>
                <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                </tr>
                <tr>
                        <td></td>
                        <td></td>

</tr>

......
</table>

<table>
	<caption>表格标题</caption>
	<tr>
		<th></th>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
        ......
</table>

(1)lable 标记是成对标记，<table>表示表格开始，</lable>表示表格结束。

(2)caption 标记是成对标记，<eapion>表示标题开始，<caption>表示标题结束。使用caption 标记可以给表格添加标题，该标题应位于table 标记与t标记之间的位置。

(3)tr(Table Row)标记是成对标记，<h>表示行开始，</t>表示行结束。

(4)th(Table Heading 表头)标记是成对标记，<th>表示表头开始，</t>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明表头文字内容一般居中、加粗显示。

(5)td(Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束表头可以用曲标记定义，也可以用 td标记定义，但<td></td>两标记之间的内容不自动居中、不加粗。

3.2 表格属性设置

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

属性	取值	说明
align	left l center l right	规定表格相对周围元素的对齐方式
bgcolor	#rrggbblcolorname b(r%,g%,b%)rgb(rr, gg, bb)	规定表格的背景颜色
border	pixels	规定表格边框的宽度
cellpadding	pixels l %	规定单元边沿与其内容之间的空白
cellspacing	pixels l %	规定单元格之间的空白
frame	abovel belowl hsidesl vsidesl lhsl rhs l border l void	规定外侧边框的哪个部分是可见的
rules	none l all l rows l colslgroups	规定内侧边框的哪个部分是可见的
height	% 1 pixels	规定表格的高度
width	% 1 pixels	规定表格的宽度

3.2.1 表格边框属性

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

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

语法:<table border= " " bordercolor=" " bordercolorlight=" " bordercolordark = " " >…..</table>

<table border= " " bordercolor=" " bordercolorlight=" " bordercolordark = " " >…..</table>

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

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

(3)borderecolorlight属性。用于设置表格亮边框，对表格左上边框生效。

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

3.2.2 表格的宽度和高度属性

通过设置 width属性和height，属性可以设置表格的宽度和高度
语法:<table width= " height= " " >…</table>

<table width= " height= " " >…</table>

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

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

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

设置表格的bgcolor属性可以改变表格的背景颜色，表格增添背景图像效果，使表格更加美观。
语法:<table bgcolor= " " background=" " >·.</table>

<table bgcolor= " " background=" " >·.</table>

(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色

(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径

(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色

3.2.4 表格边框样式属性

置表格标记中的name 属性可以改变表格边框的样式;设置表格标记中的mules属性可以改变表格内部边框样式

语法：<table frame=" " rules=" ">......内容......</table> 注：frame和rules的属性值及说明如下图

<table frame=" " rules=" ">......内容......</table>

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

设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。

语法:
<table cellspacing=" " cellpadding=" "</table>

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

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

3.2.6 表格水平对齐属性

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

语法:
<table align=" leftl center l right" >·</table>

<table align=" leftl center l right" >·</table>

3.2.7 设置表格的(tr)标记行的属性

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

语法:
<table align =" center">
        <tr align=" left l center | right" valign=" top | middle l bottom" >
                <td>···</td>
        </tr>

......

</table>

<table align =" center">
    <tr align=" left l center | right" valign=" top | middle l bottom" >
        <td>···</td>
    </tr>
    ......
</table>

3.2.8 设置单元格的属性

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

1.单元格跨行

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

语法:<td rowspan="行数" >…</td>

<td rowspan="行数" >…</td>

2.单元格跨列

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

语法:<td colspan="列数">…</td>

<td colspan="列数">…</td>

3.3 表格嵌套

表格嵌套是一种常用的页面布局方式。

<table>
     <tr>
     .....
     </tr>
     <tr>
           <td>       <!--单元格内嵌表格-->
           <table>
     <tr>
 
     </tr>
</table>
 
     </td>
     </tr>
     <tr>
     .....
     </tr>
</table>

3.4 表单

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

3.4.1 表单标记

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

<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 定义域和域标题

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

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

注：fieldset标记没有属性，是成对标记。legend标记必须位于 feldset标记内，也成对标记：有一个对齐align 属性，属性值分别为 left，center和 right事例

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页</title>
	</head>
	<body>
		<form name="form1"method="post"action="form_action.jsp"enctype="textplain">
			<fieldset>
				<legend>个人信息</legend>
				姓名：<input type="text" name="name"/>
				性别：<input type="radio" name="sex1" value="male"checked/>男	
					<input type="radio" name="sex2" value="fmale"/>女
				爱好：<input type="checkbox" name="n1" value="sing"checked/>唱歌	，rap
					<input type="checkbox" name="n2" value="dance"/>跳舞	
					<input type="checkbox" name="n3" v3alue="basketball"/>打篮球
					<input type="checkbox" name="n4" value="score"/>踢足球
					<input type="checkbox" name="n5" value="run"/>长跑
					<br/>
					<input type="file" name="file"/>	
			</fieldset>
			<fieldset>
				<legend>其他信息</legend>
				请输入您的宝贵意见：
				<textarea name="info" rows="4" cols="50"></textarea>	
				<br/>
				请选择职业规划：
				<select name="abc" multiple>	
					<option value="s1">前端</option>
					<option value="s2">后端</option>
					<option value="s3">运维</option>
					<option value="s4">测试</option>
				</select>
			</fieldset>
		</form>
	</body>
</html>

执行结果如下

3.4.3 表单信息输入

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

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

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

1 单行文本输入框

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

语法:<input name=" " type=" text" maxlength=" " size=" ” value=" " readonly/>

<input name=" " type=" text" maxlength=" " size=" ” value=" " readonly/>

2.密码输入框

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

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

<input name =" " type= " password" maxlength= " " size=" "/>

事例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			body{font-size: 36px;}
		</style>
	</head>
	<body>
		<form name="form1"method="post"action="form_action.jsp"enctype="textplain">
		用户名：<input type="text" name="user"/><hr />
		用户类型：<input type="text" name="usetype" value=""readonly/><hr />
		密码：<input type="password" name="password"/><hr>
	</body>
</html>

执行结果如下

3.复选框

设置imput 标记的 type 属性值为 checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。
语法:<input name = " " type=" checkbox" value =" " checked/>

<input name = " " type=" checkbox" value =" " checked/>

注：复选框的主要属性有 name，value 和 checked，其中 checked 属性用于设置初始选项

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>唱跳</title>
	</head>
	<body>
		<form name="form1"method="post"action="form_action.jsp"enctype="textplain">
			用户名：<input type="text" name="user"/>
			爱好：<input type="checkbox" name="n1" value="sing"checked/>唱歌		
				<input type="checkbox" name="n2" value="dance"/>跳舞	
				<input type="checkbox" name="n3" v3alue="basketball"/>打篮球
				<input type="checkbox" name="n4" value="score"/>踢足球
				<input type="checkbox" name="n5" value="run"/>长跑
		</form>
	</body>
</html>

执行效果如下

4.单选按钮

设置input 标记的type 属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法:<input name = " " type = " radio" value =" " checked/>

<input name = " " type = " radio" value =" " checked/>

5.图像按钮

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

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

6.提交按钮

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

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

7.重置按钮

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

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

8.普通按钮

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

<input name=" " type= " button" value=" " onclick=" "/>

9.文件选择框

设置input 标记的type 属性值为 fle，可以实现向表单中插入一个文件选择框语法:
<input name=" " type = " file" value= " "/>

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

10.隐藏框

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

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

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

3.4.4 多行文本输入框

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

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

<textarea name=""rows=""cols="" wrap=""/>初始信息内容</textarea>

3.4.5 下拉列表框

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

......

</select>

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

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>唱跳</title>
	</head>
	<body>
		<form name="form1"method="post"action="form_action.jsp"enctype="textplain">
			用户名：<input type="text" name="user"/>
			<input type="file" name="file"/><br/>	
			请输入您的宝贵意见：
			<textarea name="info" rows="4" cols="50"></textarea>	
			<br/>
			请选择职业规划：
			<select name="abc" multiple>		
				<option value="s1">前端</option>
				<option value="s2">后端</option>
				<option value="s3">运维</option>
				<option value="s4">测试</option>
			</select>
			<input type="hidden" name="abc" value="123"/>
		</form>
	</body>
</html>

执行结果如下

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

案例一达维工作室

代码如下

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

执行结果如下