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

3.1 表格概述

表格的组成部分

1. 行（Rows）：表格的基本单位，每一行代表一条数据记录或一个实体的信息集合。
2. 列（Columns）：表格的垂直划分，每一列通常代表一个特定的属性或字段，如姓名、年龄、性别等。
3. 单元格（Cells）：行和列的交叉点，用于存储具体的数据值。
4. 表头（Headers）：通常位于表格的顶部，用于标识每一列的数据属性。
5. 边框（Borders）：用于区分单元格，增强表格的可读性。
6. 背景色和字体样式：用于突出显示特定的数据或单元格，增强信息的视觉效果。

表格的用途

• 数据展示：表格可以清晰地展示大量数据，使得数据的对比和分析变得直观。
• 数据输入：表格常用于数据的录入和管理，方便用户操作和维护。
• 数据分析：表格是进行数据分析的基础，可以用于统计、排序、筛选等操作。
• 报告制作：在制作报告或文档时，表格是展示数据和信息的重要工具。

表格的类型

1. 静态表格：数据固定不变，通常用于展示已有的数据信息。
2. 动态表格：数据可以实时更新，常见于数据库查询结果的展示。
3. 交互式表格：用户可以对表格进行操作，如排序、筛选、编辑等，常见于数据分析软件和在线表单。

表格的格式化

• 排序：按照特定的字段进行升序或降序排列。
• 筛选：根据特定条件选择显示的数据。
• 分组：将数据按照某个或某些字段进行分组，便于查看不同组别的数据统计。
• 冻结列/行：在滚动长表格时，保持某些列或行固定不动，便于查看上下文信息。

3.1.1 表格的结构

1. 单元格（Cells）

• 定义：单元格是表格中最基本的组成单位，它位于行与列的交叉处。
• 功能：每个单元格用于存储单一的数据项，可以是数字、文本、图片或其他类型的数据。

2. 行（Rows）

• 定义：行是表格的水平划分，每一行代表一个数据记录或实体。
• 功能：行用于组织数据，使得每个记录的内容在视觉上独立。

3. 列（Columns）

• 定义：列是表格的垂直划分，每一列代表数据的某个属性或字段。
• 功能：列用于组织具有相同属性的数据，使得数据项可以按属性进行分类和比较。

4. 表头（Headers）

• 定义：表头通常位于表格的顶部，每一列的表头定义了该列的数据属性或内容。
• 功能：表头提供了对表格内容的快速理解，帮助用户识别每列所代表的信息。

5. 表尾（Footers）

• 定义：表尾位于表格的底部，有时用于显示统计数据或总结信息。
• 功能：表尾可以提供额外的信息，如总计、平均值、最大值、最小值等。

6. 边框和分隔线

• 定义：边框和分隔线用于界定单元格、行和列的边界。
• 功能：它们增强了表格的可读性和数据的可视化效果。

7. 表格标题（Table Title）

• 定义：表格标题通常位于表格上方，是对整个表格内容的简短描述。
• 功能：标题提供了对表格整体内容的概述，帮助用户快速了解表格的主题。

8. 表格样式

• 定义：表格样式包括字体、颜色、边框样式等，用于美化表格和提高可读性。
• 功能：样式可以使表格更加吸引人，并帮助用户区分重要信息。

9. 表格的尺寸

• 定义：表格的尺寸指的是行数和列数。
• 功能：根据需要展示的数据量和设计要求，表格的尺寸可以有所不同。

10. 表格的布局

• 定义：布局指的是表格中行和列的排列方式。
• 功能：合理的布局可以提高表格的视觉效果和使用效率。

11. 表格的交互性

• 定义：交互性指的是用户与表格的交互能力，如排序、筛选、搜索等。
• 功能：交互性增强了表格的实用性，使用户能够更灵活地处理数据。

3.1.2 表格的基本语法 

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML表格主要用于在网页上组织和展示数据。HTML表格的基本语法使用 <table>、<tr>、<th>、<td> 标签来构建。

1. <table> 标签

<table> 标签用于定义表格的基本结构。它需要至少包含一个 <tr>（行）标签。

2. <tr> 标签

<tr> 标签用于定义表格的一行。每一行可以包含多个 <td> 或 <th> 标签。

3. <th> 标签

<th> 标签用于定义表格的表头单元格。表头通常用于描述表格中数据的属性或标题。

4. <td> 标签

<td> 标签用于定义表格的普通单元格。每个单元格可以包含文本、图片或其他HTML元素。

5. 边框和样式

HTML表格默认有边框，可以通过CSS（Cascading Style Sheets）来调整边框样式、颜色、宽度等。

6. 表格属性

• border：设置表格边框的宽度。
• cellspacing：设置单元格之间的间距。
• cellpadding：设置单元格内容与边框之间的间距。
• width：设置表格的宽度。
• height：设置表格的高度。
• align：设置表格在页面中的对齐方式。

3.2 表格属性设置 

HTML表格属性设置

HTML表格通过使用特定的属性来控制其外观和行为。这些属性通常被直接添加到 <table> 标签中。

3.2.2 宽度，高度，表格位置等属性

1. width 属性

设置表格的宽度。你可以使用百分比或者像素值来设置。

2. height 属性

设置表格的高度。同样，你可以使用百分比或者像素值来设置。

3. summary 属性

为表格提供一个简短的描述，用于屏幕阅读器等辅助技术。

4. frame 属性

控制表格边框的显示方式。可以设置为 solid、hsides、vsides 或 none。

5. rules 属性

控制表格边线的显示。可以设置为 all、rows、cols 或 none。

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

1. 背景颜色属性：bgcolor

2. 单元格背景颜色属性：background-color

3. 背景图像属性：background

4. 单元格背景图像属性：background-image

• 当使用背景图像时，如果背景颜色和背景图像同时设置，背景图像会显示在背景颜色之上。
• 如果背景图像太大，它可能会超出元素的大小。软件会先取左上角的图案，在这种情况下，可以使用CSS的background-size属性来调整图像的大小。
• 在现代Web设计中，推荐使用CSS来设置背景颜色和图像，因为这样可以更好地控制样式，并且与HTML5的规范保持一致。

<table border="5px" bordercolor="#0000ff" width="60px" height="60px" align="left"
			background="img/1.2.png">
			<caption>xxx名单</caption>
			<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>小早川</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>欧文将</td>
				<td>女</td>
			</tr>
		</table>
		
		<table border="5px" bordercolor="#0000ff" width="30%" height="30%" 
		align="center" bgcolor="#aaaaff">
			<caption>xxx名单</caption>
			<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>小早川</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>欧文将</td>
				<td>女</td>
			</tr>
		</table>

3.2.4 表格边框样式属性

1.border 属性

设置表格的边框宽度。默认情况下，HTML表格会显示边框。你可以通过设置 border 属性来改变边框的粗细。

<table border="100px" bordercolor="#00ffff" width="30%" height="30%" 
		align="center" bgcolor="#aaaaaa" frame="hsides" rules="none">

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

1. cellspacing 属性

控制单元格之间的间距。默认情况下，单元格之间会有一定的间距。你可以通过设置 cellspacing 属性来调整这个间距。

2. cellpadding 属性

设置单元格内容与边框之间的间距。默认情况下，这个间距是预设的。你可以通过设置 cellpadding 属性来自定义这个间距。

<table align="lift" border="5"  cellspacing="20" cellpadding="20">
			<caption>单元格</caption>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>1</td>
				<td>阿斯顿</td>
				<td>男</td>
				<td>123</td>
			</tr>
		</table>

​​​​​代码的结果为左下角

3.2.6 表格水平对齐属性 

1. align 属性

控制表格在页面中的对齐方式。可以设置为 left、right 或 center。

3.2.7 设置表格的<tr>标记行的属性

1. align：用于设置行内单元格内容的水平对齐方式，可取值为 left（左对齐）、center（居中对齐）、right（右对齐）。
2. valign：用于设置行内单元格内容的垂直对齐方式，可取值为 top（顶部对齐）、middle（居中对齐）、bottom（底部对齐）

   <table align="left" border="5"  cellspacing="20" cellpadding="20"
   		 width="550px" height="250px">
   		 	<caption>单元格</caption>
   		 	
   		 	<tr align="cebter" valign="middle">
   		 		<th>序号</th>
   		 		<th>姓名</th>
   		 		<th>性别</th>
   		 		<th>年龄</th>
   		 	</tr>
   		 	<tr align="left" valign="top">
   		 		<td>1</td>
   		 		<td>阿斯顿</td>
   		 		<td>男</td>
   		 		<td>123</td>
   			</tr>
   			
   		 	<tr align="right" valign="bottom">
   		 		<td>2</td>
   		 		<td width="100" align="left">欧安塞第九位</td>
   		 		<td background-color="blue">拿手的</td>
   		 		<td>590</td>
   		 	</tr>
   		 </table>
   		 

   

 3.2.8 设置单元格的属性

宽度 (width): 设置单元格的宽度。

对齐方式 (align): 设置单元格内容的水平对齐方式。可以设置为 left、center 或 right。

背景颜色 (background-color): 设置单元格的背景颜色。

文本颜色 (color): 设置单元格内文本的颜色。

边框样式 (border): 设置单元格的边框样式。可以设置为 solid、dashed、dotted 等。

边框宽度 (border-width): 设置单元格边框的宽度。

边框颜色 (border-color): 设置单元格边框的颜色。

垂直对齐 (valign): 设置单元格内容的垂直对齐方式。可以设置为 top、middle 或 bottom。

文本装饰 (text-decoration): 设置文本的装饰样式，如下划线、删除线等。

字体大小 (font-size): 设置字体的大小。

字体样式 (font-style): 设置字体的样式，如正常、斜体等。

字体家族 (font-family): 设置字体的家族。

3.2.9 表格单元格跨行，跨列

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>

 

3.3 表格嵌套

<h3 align="center">嵌套表格布局页面</h3>
		 <table border="1" width="660px" 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>

 

3.4 表单

3.4.1 表单标记

3.4.2 定义域和域标题 

3.4.3.1 单行文本输入框

3.4.3.2 密码输入框

3.4.3.3 复选框

3.4.3.4 单选框

<form>
			用户名：<input  type="text" name="user"/>
			密码：<input type="password" name="password"/>
			<br/>
			姓名：<input type="text" name="name"/>
			性别：
			<input type="radio" name="sex" value="male" checked/>男
			<input type="radio" name="sex" value="male"/>女
			
			爱好：
			<input type="checkbox" name="n1" value="sing" checked/>唱歌
			<input type="checkbox" name="n1" value="sing"/>跳舞
			<input type="checkbox" name="n1" value="sing"/>打篮球
			<input type="checkbox" name="n1" value="sing"/>吃饭
		</form>

3.4.3.5 图像按钮

3.4.3.6 提交按钮

3.4.3.7 重置按钮

3.4.3.8 普通按钮

<form>
	<input type="image" src="img/1.3.jpg"/>
	用户名：<input  type="text" name="user"/>
	密码：<input type="password" name="password"/>
			
	<input type="submit" value="登录"/>
	<input type="reset"/>
	<input type="button"/ value="普通按钮" onclick="javascript:alert('普通的按钮弹出窗口');">
</form>

 

3.4.3.9 文件选择框

3.4.3.10 隐藏框

3.4.4 多行文本输入框

		<form>
			文件选择：
			<input type="file" name="file"/>
			隐藏框:
			<input type="hidden" name="abc" value="123"/>
			<br/>
			意见：
			<textarea name="info" rows="4" cols="50"></textarea>
		</form>

 

3.4.5 下拉列表框

		<form>
			课程选择：
			<select name="course" multiple>
				<option value="">网页</option>
				<option value="">Java</option>
				<option value="">PS</option>
				<option value="">安卓</option>
				<option value="">网络</option>
			</select>
		</form>

 

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<title>xxx工作室---联系我们</title>
		<style type="text/css">
			.chu{
				font-weight: bold;
			}
			.zil{
				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" cellpadding="0" cellspacing="5">
						<tr>
							<td width="100" align="center" valign="middle" bgcolor="#ffffff"
							 class="zil">网站首页</td>
							 <td width="100" align="center" valign="middle" bgcolor="#ffffff"
							class="zil">关于我们</td>
							<td width="100" align="center" valign="middle" bgcolor="#ffffff"
							class="zil">团队合作</td>
							<td width="100" align="center" valign="middle" bgcolor="#ffffff"
							class="zil">相关作品</td>
							<td width="100" align="center" valign="middle" bgcolor="#ffffff"
							class="zil">设计理念</td>
							<td width="100" align="center" valign="middle" bgcolor="#ffffff"
							class="zil">人物介绍</td>
							<td width="100" align="center" valign="middle" bgcolor="#ffffff"
							class="zil">联系我们</td>
						</tr>
					</table>
				</td>
			</tr>
		<tr>
			<td>
				<table width="100%" border="0" cellpadding="20" cellspacing="0">
					<tr>
						<td headers="318">&nbsp;</td>
						<td width="280" valign="top">
					<table width="100%" border="0" cellspacing="0" cellpading="20">
						<tr>
							<td height="30" align="center" bgcolor="#ffffff" class="zil">联系我们</td>
						</tr>
						<tr>
							<td height="196" bgcolor="#ffaf03">
							<p class="zibai">地址：xxx省xxx市<br />
							电话：0123-xxxxxx<br />
							QQ:1312121<br />
							工作室网站：<br />
							www.xxxx.con</p>	
							</td>
						</tr>	
					</table>	
				</td>
					<td width="280" valign="top">
						<table width="100%" border="0" cellspacing="0" cellpading="20">
					<tr>
						<td height="30" align="center" bgcolor="#ffffff" class="zil">关于我们</td>
					</tr>	
				<tr>
					<td height="278" valign="top" bgcolor="#fc880d"><p class="zibai">xxx工作室是专业
从事互联网相关开发的公司。<br />
			    专门提供优质服务和专业的网站建设方案。<br />
				xxx工作室成立于1888年,已经成为国内著名的网站建设提供商</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" cellpading="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"><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" />
		<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"/>
			</tr>
			<tr>
				<td width="200" align="right">出生年月：</td>
				<td><input name="textfield4" type="text" id="textfield4" size="12"/>年
				<select name="select" id="selct">
					<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="submit" name="button2" id="button2" value="重置"/>
				</td>
			</tr>
				</table>
			</fieldset>
		</form>
	</body>
</html>