Document

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

2024-09-29
dfer
74
css html 前端 CSDN

3.1 表格概述

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

3.1.1 表格的结构

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

3.1.2 表格的基本语法

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

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

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

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

(4)m(Table Heading 表头)标记是成对标记，<t>表示表头开始，</t>表示表头结头交学高资时、表头常营作方表场的路1行通者筑1列、用来对格单元的内表头文字内容一般居中、加粗显示。

（5）标记是成对标记，定义单元格或列。以d开始，以安不自动東头可以用山标记定义，也可设用装保已，义单元格或列两标记之间的内容不自动展中、不加粗。
在一个表格中，可以插入多个甘标记，表示多行，一组<u></u>标记表示插人一行一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等。

<! 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>jaya</td><td>php</td>
</tr>
<tr>
<td>第 3-4 节</td>
<td>php</td>
<id>计算机数学</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所示

3.2.1 表格边框属性

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

语法：

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

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

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

3.2.2 表格的宽度和高度属性

通过设置widh属性和height，属性可以设置表格的宽度和高度
语法:

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

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

(2)height。其单位可以是长度单位或百分比，用于定义表格的高度设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整

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

设置表格的bgcolor属性可以改变表格的背景颜色,表格增添背景图像效果，使表格更加美观。
语法:

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

(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色 (2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。 (3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色

<!DOCTYPE html>
<html>
<head>
<meta charset= " UTF-8" >
<title>设置表格边框、背景</title>
</head>
<body>
<h4 align="center">设置表格边框、背景</h4>
<table align = " center" width = " 700px" height =" 150px"
border= " 15" bordercolor= " black" bordercolorlight=" #ff0000" bordercolordark =" #6600ff" bg
›olor=" #99cccc" >
<tr>
<th>学号</th>
<th>姓名</th>
<th>所在院系</th>
</tr>
<tr>1616010218</td>
<td>李明</td>
<td>信息学院</td>
</tr>
<tr>
<td>1416020109</td>
<td>王丹</td>
<td>管理学院</td>
</tr>
</table>
<hr>
<table align=" center" border=" 15px" bordercolor= " grey" width=" 700px" height =" 150px'background = " img/bj01. jpg" bgcolor = " #99cccc" >
<tr>
	<th>学号</th>
	<th>姓名</th>
	<th>所在院系</th>
</tr>
	<tr>
	<td>1616010218</td>
	<td>李明</td>
	<td>信息学院</td>
</tr>
	<tr>
	<td>1416020109</td>
	<td>王丹</td>
	<td>管理学院</td>
	</tr>
	</table>
	</body>
</html>

3.2.4 表格边框样式属性

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

语法:

<table frame="”rules="">……肉容…</table>

<!DOCTYPE html>
<html>
      <head>
            <meta charset=" UTF-8" >
            <title>>设置边框样式</title>
</head>
<body>
<table align =" center" border=" 2" bordercolor=" blue" width =" 400px" height=" 120px" frame="hsides" rules = " all" >
<caption><b>表格边框样式定义</b></caption><tr><th>姓名 </th><th>院系名称 </th><th>学号</th>
</tr>
<tr>
	<table align = " center" border= " 2" bordercolor= " blue" width=" 400px" height=" 120px" frame="hsides" rules= " all" >
	<caption><b>表格边框样式定义</b></caption><tr>
	<th>姓名</th>
	<th>院系名称</th>
	<th>学号</th>
	</tr><tr>
	<td>李明</td><td>信息学院</td><td>1616010218</td>
	</tr><tr>
	<td>王丹</td><td>管理学院</td><td>1416020109</td>
	</tr>
	<tr>
	<td>张小林 </td>
	<td>工程学院 </td>
	<td>1716030115</td>
	</tr>
	</table>
	</body>
	</html>

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

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

语法：

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

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

<!DOCTYPE html>
   <html>
         <head>
			 <meta charset=" UTF-8" >
			 <title>设置单元格间距和边距</title>
			 <style type=" text/css" >
			 strong {
			     background :#ccffcc ;
}
			 td{
			 background : #99ccff;
}
			 </style>
			 </head>
			 <body>
			 <b>设置单元格间距和边距</b>
<table width =" 380" border=" 4" cellspacing=" 50px" cellpadding=" 20px" bgcolor=" #9966ff" >
<tr>
<td><strong>网页设计</strong></td>
<td><strong>大学体育</strong></td>
</tr>
</table>
</body>
</html>

3.2.6 表格水平对齐属性

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

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

说明:align 属性的取值可以为let(默认居左)、center(居中)和right(居右)

<! DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8" ><title>设置表格水平对齐方式</title><style type = " text/css" >divi{
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>
<t>
<td>李明</td><td>信息学院</td><td>1616010218</td>
</tr><tr><td>王丹</td><td>管理学院</td><td>1416020109</td>

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

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

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

</table>

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

3.2.8 设置单元格的属性

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 标记的 cospan 属性可以设置单元格跨列合并。

语法:

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

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

<! DOCTYPE html>
<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">全天参观人工智能实训中心</键>
</tr>
</table>
</body>
</html>

3.3 表格嵌套

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

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


<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8" ><title>嵌套表格布局页面</title>
<style>
消管做策型商
bodyi font-size :3ópx;f
</style>
</head>
<body>
<h4 align="center">嵌套表格布局页面</h4>
<table width ="660px" border=" 1" align=" center" bordercolor =" #3333{f">
<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 height= " 50"align=" center" >
</tr>
<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 表单

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>

说明:<form>和</fomm>之间可包含各种表单信息输入标记。表单标记的属性主要有name，action，method 和enctype 等，其属性、取值及说明。

3.4.2 定义域和域标题

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

语法:

<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 属性定义的tpe属性有很多不同的值，设置属性值不同，就会产生不同界面效果。imput 标记的属性取值及说明

3.4.3.1 单行文本输入框

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

语法:

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

说明:单行文本输人框的主要属性有name，maxlength，size，value和readonly，其属性及取值说明如

3.4.3.2 密码输入框

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

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

说明:密码输人框的主要属性有name，maxlenth和size，取值及说明与单行文本输入框
相同。

3.4.3.3 复选框

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

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

说明:复选框的主要属性有name，value和checked，其中checked属性用于设置初始预选项。复选框的属性、取值及

3.4.3.4 单选按钮

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

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

说明:单选按钮的属性有name，vale和checked等，其属性、取值及说明与复同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以选按钮的所有name属性值必须相同，value属性取值应该不同。

3.4.3.5 图像按钮

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

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

说明:图像按钮主要属性有name，src，width和height。其属性

3.4.3.6 提交按钮

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

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

3.4.3.7 重置按钮

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

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

3.4.3.8 普通按钮

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

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

3.4.3.9 文件选择框

设置 input 标记的type属性值为 fle，可以实现向表单中插入一个文件选择框,
语法:

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

3.4.3.10 隐藏框

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

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

3.4.4 多行文本输入框

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

语法:

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

3.4.5 下拉列表框

下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用select 和 option 标记来在表单中插入下拉菜单和列表项。

语法:

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

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:#FED630A;
        }

        .zi2 {
            font-family:"微软雅黑";
            font-weight:bold;
			color: #f60;
			text-decoration: underline;
		}
		.zibai {
			font-family: "微软雅黑";
			color: #FFF;
		}
		<body>{
			background-image: url();
			}
			</style>
			</head>
			<body>
			    <table width="1190" border="0" cellspacing="0" cellpadding="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="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>

案例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="js/Male.gif" width="22" height="21" align="absmiddle" />
			<input type="radio" name="radio" id="radio2" value="radio2" />
			女< img src="js/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>

上一篇：基于php的校园互助

下一篇： PHP教材征订系统-