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

业余绳匠

于 2024-09-27 11:09:52 发布

阅读量600

点赞数 9

文章标签： css html 前端

本文链接：https://blog.csdn.net/woyinyuebofangqi/article/details/142482850

版权

3.1 表格概述

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

3.1.1 表格的结构

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

3.1.2 表格的基本语法

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

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

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

(4)t(Table Heading 表头)标记是成对标记，<th>表示表头开始，</th>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说表头文字内容一般居中、加粗显示。
(5)d(Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</d>结表头可以用出标记定义，也可以用标记定义，但<td></d>两标记之间的内容不自咖中、不加粗。

<!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>
            <td></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></td>
			<td></td>
		</tr>
    </table>
</body>
 
</html>

3.2 表格属性的设置

3.2.1 表格边框属性

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

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

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

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

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 表格边框样式属性

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

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

语法:
<table cellspacing=" " cellpadding=" "
</table>
(1)cellspacing。值的单位为像素或百分比，默认值为 2px。
(2)cellpadding。值的单位为像素或百分比。

3.2.6 表格水平对齐属性

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

 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格水平对齐方式</title>
<style type="text/css">
div{
width:100%;
height:100px;
}
</style>
</head>
<body>
<div>
<table width="400" align="left" border="2">
<caption>学生信息表(左对齐)</caption>
<tr>
<td>李明</td>
<td>信息学院</td>
<td>1616010218</td>
</tr>
<tr>
<td>王丹</td>
<td>管理学院</td>
<td>1416020109</td>
</tr>
</table>
</div>
<div>
<table width="400" align="center" border="2">
<caption>学生信息表(居中对齐)</caption>
<tr>
<td>李明</td>
<td>信息学院</td>
<td>1616010218</td>
</tr>
<tr>
<td>王丹</td>
<td>管理学院</td>
<td>1416020109</td>
</tr>
</table>
</div>
</body>
</html>

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

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

......</table>

3.2.8 设置单元格的属性

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

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

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

 <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>
</table>
</body>
</html>

3.4 表单

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

3.4.1 表单标记

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

3.4.2 定义域和域标题

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

</fieldset>

</from>

3.4.3 表单信息输入

表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是imput标记，可以输入一行信息。input 标记是单个标记
语法:
<input name=" " type=" "/>

单行文本输入框
设置imput 标记的type属性值为text,可以实现向表单中插人一个单行文本框。在单行文本框中可以输人任意类型的数据，但是输人的数据只能单行显示，不能换行。语法:
<input name = " " type=" text" maxlength=" " size=" " value="" readonly/>

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

<!DOCTYPE html>
<html> 
	<head>
	<meta charset="UTF-8">
	<title>复选框与单选按钮的应用</title>
	<style type="text/css"> 
	fieldset{
		width: 300px;
		height: 120px;
		border: 2px double #003399;   
		padding-left: 30px;
	}
	</style>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>请填写个人信息</legend><br>
				姓名:<input type="text" name="name" maxlength="10" size="10"/><br>
				爱好:<input type="checkbox" name="n1" value="跳舞"/>跳舞
				<input type="checkbox" name="n2" value="踢足球" checked="checked"/>踢足球
				<input type="checkbox" name="n3" value="打游戏" checked="checked"/>打游戏<br>
				性别:<input type="radio" name="sex" value="male" checked="checked"/>男
				<input type="radio" name="sex" value="female"/>女
				</fieldset>
			</form>
		</body>
	</html>

3.4.4 多行文本输入框

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

 <! --示例3.16程序-->
 <! DOCTYPE html>
 <html>
	<head>
		  <meta charset="UTF-8">
		  <title>多行文本输入框的应用</title>
	</head>
	<body>
		<form>
			<h3>请您填写宝贵意见：</h3>
			<textarea name="info" rows="4" cols="50" wrap="virtual">
			</textarea>
		</form>
	</body>
</html>

3.4.5 下拉列表框

下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用select和option 标记来在表单中插入下拉菜单和列表项。语法:
<select name=" " size="" multiple>
<option value="" selected>文字信息1</ option>
<option value="">文字信息 2</option>
......
</select>

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

案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"
		<title>达维工作室——联系我们</title>
		<style type="text/css">
			.chu{
				font-weight: bold;
			}
			.zil{
				font-family: "微软雅黑";
				font-size: 20px;
				font-weight: bold;
				columns: #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" 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="#FFFAF03">
							<p class="zibai">地址：广东省江门市XXXXXXXX<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="#FC88DD"><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">更多&gt;&gt;</a></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="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.gifr" 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>
			<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>