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

3.1 表格概述

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

3.1.1 表格结构

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

3.1.2 表格的基本语法

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

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

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

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

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

3.2 表格属性设置

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

3.2.1 表格边框属性

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

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

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

(2)bordereodor属性。用于设置表格边框的颜色，可以使用b 函数、十六进制数和颜色英文名称。
(3)bordereoloright属性。用于设置表格亮边框，对表格左上边框生效(4)bordereolordark属性。用于设置表格暗边框，对表格右下边框生效

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)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色

3.2.4 表格边框样式属性

设置表格中标记的 fame 属性可以改变表格边框的样式:设置表格标记中的 rules 属性可以改变表格内部边框的样式.

语法:

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

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

3.2.6 表格水平对齐属性

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

说明：align属性的取值可以为left（默认居左)、center（居中）和right（居右）

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

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

通过t标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐居中对齐和居右对齐。通过比标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法:
<table align =" center" >
<tr align=" left | eenter | right" valign=" top | middle l bottom" >
<td>…</td>
</tr>

.......

</table>

说明:let表示设置行内容居左对齐;center表示设置行内容居中对齐;ght表示设置行内容居右对齐。top表示设置行内容顶部对齐;middle表示设置行内容居中对齐;bottom表示设置行内容底部对齐。其中行垂直居中对齐属性值与行水平居中对齐属性值不同。

3.2.8 设置单元格的属性

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

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

3.2.9.1 单元格跨行

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

语法:

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

3.2.9.2 单元格跨列

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

P72 课上练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h3 align="center">设置单元格跨列、跨行属性</h3>
		<table border=" ]" width =" 500px" align =" center" bordercolor=" #3366f" >
			<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="#3333f">
			<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>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。

3.4.2 定义域和域标题

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

3.4.3 表单信息输入

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

3.4.3.1 单行文本输入框

设置imnput 标记的type 属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输人任意类型的数据，但是输入的数据只能单行显示，不能换行。语法:
<input name = " " type = " text" maxlength=" " size=" " value=" " readonly/>说明:单行文本输人框的主要属性有name，maxlengh，size，value和readonly，其属性及取值说明如表 3-9 所示

3.4.3.2 密码输入框

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

3.4.3.3 复选框

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

3.4.3.4 单选按钮

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

3.4.3.5 图像按钮

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

3.4.3.6 提交按钮

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

3.4.3.7 重置按钮

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

3.4.3.8 普通按钮

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

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-14所示。

3.4.4 多行文本输入框

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

3.4.5 下拉列表框

下拉列表通常需要同时使用select和option标记来在表单中插入下拉菜单和列表项。

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;
			}
			.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="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" calss="zil">网站首页</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">关于我们</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">团队合作</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">相关作品</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">设计理念</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">人物介绍</td>
							<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">联系我们</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" aligh="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 />
											[email protected]<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 calss="zibai">&nbsp;</p>
											<p calss="zibai chu"><a href="#">更多&gt;&gt;</a></p>
										</td>
									</tr>
								</table>
							</td>
							<td width="280">
								<table widht="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"/>
			                    <input type="radio" name="radio" id="radio2" value="radio" checked="checked" />  
			                    女<img src="img/Female.gif"/>
			                </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>

看一眼效果:

如果本章节对各位读者大大有帮助的话收藏分享加点赞下期文章不会断

标签：第三章,表格,标记,单元格,表单,设置,属性
From： https://blog.csdn.net/2402_83287175/article/details/142346937

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

3.1 表格概述

3.1.1 表格结构

3.1.2 表格的基本语法

3.2 表格属性设置

3.2.1 表格边框属性

3.2.2 表格的宽度和高度属性

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

3.2.4 表格边框样式属性

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

3.2.6 表格水平对齐属性

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

3.2.8 设置单元格的属性

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

3.2.9.1 单元格跨行

3.2.9.2 单元格跨列

P72 课上练习

3.3 表格嵌套

表格嵌套课上练习:

3.4 表单

3.4.1 表单标记

3.4.2 定义域和域标题

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

3.4.3.2 密码输入框

3.4.3.3 复选框

3.4.3.4 单选按钮

3.4.3.5 图像按钮

3.4.3.6 提交按钮

3.4.3.7 重置按钮

3.4.3.8 普通按钮

3.4.3.9 文件选择框

3.4.3.10 隐藏框

3.4.4 多行文本输入框

3.4.5 下拉列表框

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

相关文章

赞助商

阅读排行

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

3.1 表格概述

3.1.1 表格结构

3.1.2 表格的基本语法

3.2 表格属性设置

3.2.1 表格边框属性

3.2.2 表格的宽度和高度属性

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

3.2.4 表格边框样式属性

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

3.2.6 表格水平对齐属性

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

3.2.8 设置单元格的属性

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

3.2.9.1 单元格跨行

3.2.9.2 单元格跨列

P72 课上练习

3.3 表格嵌套

表格嵌套课上练习:

3.4 表单

3.4.1 表单标记

3.4.2 定义域和域标题

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

3.4.3.2 密码输入框

3.4.3.3 复选框

3.4.3.4 单选按钮

3.4.3.5 图像按钮

3.4.3.6 提交按钮

3.4.3.7 重置按钮

3.4.3.8 普通按钮

3.4.3.9 文件选择框

3.4.3.10 隐藏框

3.4.4 多行文本输入框

3.4.5 下拉列表框

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

相关文章

赞助商

阅读排行

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