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

ChengJianCong@

已于 2024-09-26 20:19:47 修改

阅读量1.6k

点赞数 49

文章标签： css html 前端

于 2024-09-24 14:41:30 首次发布

本文链接：https://blog.youkuaiyun.com/2302_80974792/article/details/142367468

版权

3.1 表格概述

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

3.1.1 表格的结构

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

3.1.2 表格的基本语法

在 HTML中，常用表格主要通过5个标记来构成:<table>，<caption>，<th>，<tr>和<td>，各标记说明如表 3-1所示。

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

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

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

(4)th(Table Heading表头)标记是成对标记，<th>表示表头开始，</t>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明表头文字内容一般居中、加粗显示。
(5)td(Table Data)标记是成对标记，定义单元格或列。以<td>开始，以<td>结東表头可以用 th 标记定义，也可以用 td 标记定义，但<td></td>两标记之间的内容不自动居中、不加粗。
在一个表格中，可以插入多个t标记，表示多行，一组<t></tr>标记表示插入一行一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等

3.2 表格属性的设置

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

3.2.1 表格边框属性

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

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

3.2.2 表格的宽度和高度属性

通过设置 width属性和height，属性可以设置表格的宽度和高度语法:
<table width =" height=" " >·..</table>
(1)widt。其单位可以是长度单位或百分比，用于定义表格的宽度(2)heigh。其单位可以是长度单位或百分比，用于定义表格的高度，设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整

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

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

3.2.4 表格边框样式属性

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

语法:
<table frame="" rules="">…内容</table>

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

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

3.2.6 表格水平对齐属性

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

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

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

通过t标记的 align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐居中对齐和居右对齐。通过t标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法:
<table align =" center" >
<tr align=" left | center | right" valign=" top l middle l bottom" >
<td>··</td>
</tr>
</table>
说明:lett 表示设置行内容居左对齐;center表示设置行内容居中对齐;nght表示设行内容居右对齐。top表示设置行内容顶部对齐;middle表示设置行内容居中对齐;bot表示设置行内容底部对齐。其中行垂直居中对齐属性值与行水平居中对齐属性值不同

3.2.8 设置单元格的属性

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

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

3.2.9.1 单元格跨行

使用单元格 td标记的 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是正整数)，可以设置某一单元格跨“列、路华元格合物元格数量万要减少品-1个，即删除-十个器标记

3.3 表格嵌套

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

<table>
<tr>

</tr>
</table>

3.4 表单

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

3.4.1 表单标记

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

语法:
<iorm method="post" action="">
<imput ivpe="text" name=""/><texiarea name=" "rows=" "cols="">......</textarea>
<select name="">
<option value=""selected></option>
<option value=" "></option>
</select>
</form>
说明:<form>和</form>之间可包含各种表单信息输人标记。表单标记的属性主要有name，action，method 和enctype等，其属性、取值及说明如表3-7所示。

3.4.2 定义域和域标题

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

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/>说明:单行文本输人框的主要属性有 name，maxlength，size，value 和readonly，其属性及取值说明如表 3-9 所示

3.4.3.2 密码输入框

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

3.4.3.3 复选框

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

3.4.3.4 单选按钮

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

3.4.3.5 图像按钮

设置 input 标记的 type 属性值为 image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插人一张图像，通过 src 属性加载图像。
语法:
<input name=" " type="image" src=" " width="" height=" "/>
说明:图像按钮主要属性有name，src，width和height。其属性、取值及说明如表3-11所示

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 普通按钮

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

3.4.3.9 文件选择框

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

3.4.3.10 隐藏框

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

3.4.4 多行文本输入框

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

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 等属性。option 标记有 value 和 selected 等属性。select 标记与 option 标记必须配合使用。每一选项必须指定一个显示的文本和一个 value值，显示文本通常附在 option 标记后面。它们的属性、取值及说明如表 3-16 所示。

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 :
		texl-dccoration tunderline ;
		}
		zibni
		[ont-family:"微软雅,黑":
		color: #FFF;
		}
		
		
		</style>
		</head>
		<body background="../img/bj.jpg">
		
		<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 ="zil">网站首页</id>
		<td width="100" align=" center" valign= " middle"bgcolor="#FFFFFF" class ="zil">关于我们</id>
		<td width ="100" align= " center" valign=" middle" bgcolor = " #FFFFFF" class ="zi1">团队合作</td>
		<td width=" 100" align=" center" valign=" middle" bgcolor= " #FFFFFF" class ="zil">相关作品</td>
		<td width =" 100" align=" center" valign= " middle" bgcolor= " #FFFFFF" class ="zil">设计理念</id>
		<td width =" 100" align=" center" valign= " middle" bgcolor= " #FFFFFF" class ="zi1">人物介绍</td>
		<td width =" 100" align =" center" valign = " middle" bgcolor = " #FFFFFF" class ="zil">联系我们</Id>
		</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 heigh =" 30” align="center" bgcolor="#FFFFFF” class="1">联系我们</d>
		</tr>
		<tr>
		<td height=°196" bgcolor=”#FFAP03”>
		<p class=”zibai”>地址:广东省江门市XXXXXXXXX<br />
		电话:0750-XXXXXX<br/>
		传真:0750-XXXXXX<br/>
		00: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="zl">关于我们</td>
		</t>
		<tr>
		<td height="278"valign="top"bgcolor="#FC880D"><p class="zibai">达维工作室是专业从事互联网相关开发的公司。<br/>专门提供全方们的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br
		/>
		</p>
		达维工作室成立于 2014年,已经成为国内著名的网站建设提供商。多年的风雨历程…
		<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="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">更多 &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 =" formI" id ="form1">
		<fieldset>
		<legend>用户注册信息</legend>
		<tr>
		<table width="600" border="O" align="center" cellpadding="O" cellspacing="O">
		<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/images/Male.gif" width="22" height="21" align="absmiddle"/>
		<input type="radio" name ="radio" id="radio2" value= "radio2"/>
		女<img src="../img/images/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