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

念怀故安

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

阅读量434

点赞数 19

文章标签： html 前端

于 2024-09-26 15:47:09 首次发布

本文链接：https://blog.csdn.net/w_wx8866/article/details/142373956

版权

3.1 表格概述

3.1.1 表格的结构

表格是由行和列组成的二维表，大体上类似于xlsx表格但同时没有那么多内容，并且包含文本，图片等多种类型

第一行是表头，往下是内容，在此就不多概述。

3.1.2 表格的基本语法

表格所有内容都在<table>...</table>里面，切记，表格所有内容都要在<table>...</table>里，就算做新的表格，也不要放在新的<table>...</table>外！！！

表头放在<caption>...</caption>

表格内的每一行都在<tr>...</tr>里面

<th>...</th>表头会默认加粗

<td>...</td>这是普通表格的内容

		<table>
			<caption>表格名单</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 表格属性的设置

3.2.1 表格边框属性

在<table border=“...px”>编辑边框属性，编辑边框的大小。

<table bordercolor=“...”>设置表格边框的颜色，可以用英文或者rgb（可以右键编辑选择颜色）属性。

上面的那个是设置的5（<table border=“5px”>），下面的是2（<table border=“2px”>）。

3.2.2 表格的宽度和高度属性

<table width=“...px” height="...px">当宽高都无法容纳内容的时候，会失效的是高度，宽高不能同时太小，不然高度会失效。

<table width=“...px” height="...px">不止可以设置一个固定的值，还可以设置百分比<table width=“20%” height="20%">来让窗口不管怎么动，都只占百分之二十的窗口内容。

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

<table bgcolor="#...">在此处可以添加表格的背景颜色，#符号后面写的内容可以参考第二章的内容，第二章，水平线标签，小节。

<table background="img/...">可以设置表格背景的图片样式，再提一次，一定要确定名字和后缀名一致，千万不能搞错，而且图片要放到img文件夹内。

3.2.4 表格边框样式属性

格式的话也是<table frame="..." rules="...">这个可以调整表格的边框属性，具体是什么样式可以看下图的内容，根据内容更改。

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

单元格的间距：我们可以把单元格看成盒子，单元格的间距就是格子与格子的距离

单元格的边距：边距是单元格的内容和边框之间的距离

<table cellspacing="...px">是设置单元格的间距，虽然设置效果看起来和设置宽高相似，但是差别还是很大的。

上面是宽高，下面是间距。

<table cellpadding="...px">是设置单元格的边距，也就是内容和边框的距离。

代码样式就不详写了，毕竟和上述的其他相似，都是在<table>内添加。

3.2.6 表格水平对齐属性

<table align="...">可以设置表格的对齐，于先前一样，只需要在“<table>”内，和其他的内容不分前后。

<table align="left">居左（这是默认的，如果没有设置的话就会默认位于左边）。

<table align="center">居中。

<table align="right">居右。

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

<tr align="...">可以设置表格内容的水平对齐方式（默认情况下的居左的，在下下图中也可以看出来，就不多说了）

<tr align="left">居左

<tr align="center">居中

<tr align="right">居右

<tr align="left">
				<td>3</td>
				<td>3333</td>
				<td>女</td>
			</tr>
			<tr align="center">
				<td>3</td>
				<td>1111</td>
				<td>女</td>
			</tr>
			<tr align="right">
				<td>3</td>
				<td>2222</td>
				<td>女</td>
			</tr>

<tr valign="...">可以设置表格内容的垂直对齐方式，它默认是居中的。

<tr valign="top">在单元格最上方

<tr valign="middle">在单元格中间的位置

<tr valign="bottom">在单元格最下方

<tr valign="top">
				<td>3</td>
				<td>3333</td>
				<td>女</td>
			</tr>
			<tr valign="middle">
				<td>3</td>
				<td>1111</td>
				<td>女</td>
			</tr>
			<tr valign="bottom">
				<td>3</td>
				<td>2222</td>
				<td>女</td>
			</tr>

3.2.8 设置单元格的属性

不止可以给表格设置属性，我们也可以单独给某一个单元格也设置属性，颜色，背景，字体等(给某一行设置也可以(在表格嵌套那一单元有演示出来，可以在那里了解这些))。

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

3.2.9.1 单元格跨行

<td rowspan="...">跨行，其中数字如果是2，那就是跨上下两行的意思。

3.2.9.2 单元格跨列

<td colspan="...">跨列，在其中输入对应的数字横跨相应的列数。

<!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:00-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>
	</body>
</html>

3.4 表单

3.4.1 表单标记

3.4.2 定义域和域标题

定义一个区域在其中编辑，一种非常常见的格式。

其中主要由“fieldset>
<legend>定义域</legend>”的格式组成。

<form>
	<fieldset>
		<legend>定义域</legend>
			<h3>请选择您的课程：</h3>
				<select size="5" multiple>
					<option name="course" value="cA" selected>数据跌宕</option>
					<option name="course" value="cB">崩坏核心</option>
					<option name="course" value="cC">破碎篇章</option>
					<option name="course" value="cD">史诗长河</option>
					<option name="course" value="cE">超现实规格感染</option>
					<option name="course" value="cF">书写者层次</option>
					<option name="course" value="cG">万物一体</option>
	</fieldset>
</form>

3.4.3 表单信息输入

所有的输入都是用<input/>来输入，但是会用<input type="..."/>来区别。

3.4.3.1 单行文本输入框

input name="a"(name负责给它一个名字，用于暂时储存数据，然后等待服务器响应) 。

type="text"（引号内表示这是一个单行的输入框，它只能输入一行，不能换行）。

maxlength="5"（5表示输入框的内容长度最多为五个字符，不管是文字，字母，字符等）。

size="20"（20表示的是输入框的长度，为20，如果数字变小的话输入框的长度也会变小）。

value="0"（0表示输入框的内容默认为0，如果不更改的话就会以0显示）。

readonly（如果在<input...>中输入此标签，那么输入框的内容就无法更改，而是一直以默认值显示，如果没有默认值就什么也不会显示）。

<form>
单行文本输入框案列:<input name="danhan" type="text" maxlength="5" size="20" value="0" readonly/>
</form>

3.4.3.2 密码输入框

输入之后显示的内容是一个点，用于保护用户的隐私，但是旁边的小眼睛可以使用户确认是否无误

。其他部分具体的同上，除了type属性外，其他书写形式一致。

<form>
密码输入框:<input name="mima" type="password" maxlength="5" size="21"/>
</form>

3.4.3.3 复选框

<input name="fuxuan"（这个不用多说）

type="checkbox"（这个是<input>标记中type的属性，如果需要使用复选框的话需要填写此选项）

value="0"(此处的默认值不外显，但是是规定input的值，在使用复选框的时候，此处每一行的值都应该不一样) （数据会传到后端数据库里面，所以最好就是打英文这样比较好，也可以设置中文，但是推荐用英文比较好。）

checked（除了上面type的属性必须要打以外，这个标签也是必须要打的，用于对复选框的使用）/>

<form>
复选框：<input name="fuxuan" type="checkbox" value="0" checked/><br/>
		愿意同意此选项：<input name="fuxuan1" type="checkbox" value="1" checked/><br/>
		自愿选择：<input name="fuxuan2" type="checkbox" value="2" checked/><br/>
		信任此渠道：<input name="fuxuan3" type="checkbox" value="3" checked/><br/>
		我非常喜欢此选项<input name="fuxuan4" type="checkbox" value="4" checked/>
</form>

3.4.3.4 单选按钮

<input name="danxuan"（定义这段数据的名字，然后存储下来等待服务器相应。在单选框里面，所有的name都必须一样）

type="radio"（此处不多说，是type使用单选框必须要带的）

value="a"（数据会传入到数据库，推荐用英文，中文也可以，但是要注意更改编码格式）

checked（除了上面type中的属性以外，此处的这个也必须要加）/>


<form>
单选（请选择您的序列号）:<input name="danxuank" type="checkbox" value="a" checked/><br/>
		序列一：命定之眼<input name="danxuan" type="radio" value="b" checked/><br/>
		序列二：牵魂梦绕<input name="danxuan" type="radio" value="c" checked/><br/>
		序列三：茫然泰坦<input name="danxuan" type="radio" value="d" checked/><br/>
		序列四：魂灭永续<input name="danxuan" type="radio" value="e" checked/><br/>
		序列五：万物归恒<input name="danxuan" type="radio" value="f" checked/>
</form>

3.4.3.5 图像按钮

input name="tuxiang"（临时存储数据，然后后续导入到数据库里）

type="image"（必写的，是图像按钮的属性）

src="img/ShuJu.jpg"（img是图片路径的文档，src是按照路径找过去用的）

width="30" height="20"（在此处定义插入图片的宽和高，单位是像素点）

<form>
	<input type="image" src="img/ShuJu.jpg"/>
</form>

3.4.3.6 提交按钮

<input name="tijiao"（不多说，前面也有详解的，分出来美观一点，我就不改了）

type="submit"（提交按钮的type属性，是必写的）

value="提交"（提交按钮的内容在这里被写入，可以将“提交”替换成任意字符，也是可以的）

<form>
	<input name="tijiao" type="submit" value="你好"/>
</form>

3.4.3.7 重置按钮

<input name="chongzhi"(重置按钮可以清除输入选项框的内容，使选项框的内容为空或者默认值)

type="reset"（重置按钮的属性，不过重置按钮要放到相同的<form>...</form>标签内才可以有效，不然的话重置是没有用的）

value="重置"（在此处定义按钮的名字）

<form>
    <input name="chongzhi" type="reset" value="重置"/>
</form>

3.4.3.8 普通按钮

最普通的一种按钮

<input name="tupong"（储存数据的名字，并且暂时保存数据，导入到数据库里面）

type="button"（普通按钮的type属性，也是必写的）

value="选项一"（是input标记的值，也是选项框的内容）

οnclick=""（此处是普通按钮所绑定的事件代码，也可以是自定义函数或者其他的)

<form>
    <input name="tupong" type="button" value="选项一" onclick="javascript:alert('注册新用户')"/>
</form>

3.4.3.9 文件选择框

<form>
    <input type="file"/>
</form>

3.4.3.10 隐藏框

有些数据后端需要，但是前端不需要。那么就需要用到隐藏框隐藏起来，传给后端，这就是它的作用，格式如下。

<form>
    <input name="yincang" type="hidden" value="22"/>
</form>

3.4.4 多行文本输入框

上面有单行输入，那么此时就开始多行，毕竟有时候需要很多字数。比如给与意见，或者其他数据。

<textarea rows="..." cols="...">...</textarea>：是设置文本域，就是输入数据的行数和宽度

<form>
	多行文本输入框：
	<textarea rows="5" cols="5"></textarea>
</form>

3.4.5 下拉列表框

select中有三个属性：

name定义sele标记的名称。

size下拉列表框可见的内容（旁边滑轮可以滑动内容）。

miltiple规定可以选择多个选项（可以删除此项）。

<option...>...</option>中有两个属性：

value规定列表项的值。

selected设置预选列的列表项。

<form>
	<h3>请选择您的课程：</h3>
		<select size="5" multiple>
			<option name="course" value="cA" selected>数据跌宕</option>
			<option name="course" value="cB">崩坏核心</option>
			<option name="course" value="cC">破碎篇章</option>
			<option name="course" value="cD">史诗长河</option>
			<option name="course" value="cE">超现实规格感染</option>
			<option name="course" value="cF">书写者层次</option>
			<option name="course" value="cG">万物一体</option>
</form>

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

案例一

<!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;
				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">
								<img src="img/logo.jpg" alt="" width="100" height="63"/></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>
								<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zil">联系我们</td>
						</tr>
					</table>
				</td>
			</tr>
		<tr>
			<td>
				<table width="100%" border="0" cellpadding="0" cellspacing="20">
					<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="zil">联系我们</td>
						</tr>
					<tr>
						<td height="196" bgcolor="#FFAF03">
						<p class="zibai">
							地址:广东省江门市XXXXXXXXXXX<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="zil">关于我们</td>
		</tr>
		<tr>
			<td height="278" valign="top" bgcolor="#FC880D"><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="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 name="radio" type="radio" id="radio2" value="radio2"/>
		女<img src="img/Female.gif" width="22" 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="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>