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

3.1 表格概述

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

3.1.1 表格的结构

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

3.1.2 表格的基本语法

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

表 3-1 常用表格标记形式及说明表
标记形式	说明
<table></table>	表格标记
<caption></caption>	表格标题标记
<th></th>	表格表头标记
<tr></t>	表格的行标记
<td></td>	表格的列标记

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

3.2 表格属性的设置

3.2.1 表格边框属性

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

表 3-3 表格边框属性说明表
边框属性	说明	边框属性	说明
borde	表示表格边框粗细	bordercolorlight	表示表格亮边框颜色
bordercolor	表示表格边框颜色	bordercolordark	表示表格暗边形颜色

语法:<table border= " " bordercolor=" " bordercolorlight =" " bordercolordark = " " >···</table>
(1)border属性。用于设置边框的粗细，单位是像素。
(2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和色英文名称。
(3)bordercoloright属性。用于设置表格亮边框，对表格左上边框生效。
(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 表格边框样式属性

<table frame="hsides" rules="all">

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

<table border="2px" cellspacing="4px">
<table border="2px" cellpadding="4px">

3.2.6 表格水平对齐属性

<table align="left|center|right">

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

<tr align="left|center|right">
<tr valign="middle|top|bottom">

3.2.8 设置单元格的属性

属性值	说明	属性值	说明
align	单元格内容水平对齐	bordercolorlight	单元格的亮边框颜色
valign	单元格内容垂直对齐	bordercolordark	单元格的暗边框颜色
bgcolor	单元格的背景颜色	rowspan	单元格跨行
background	单元格背景图像	colspan	单元格跨列
bordercolor	单元格的边框颜色	width	单元格宽度
height	单元格高度

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标记的colspan属性可以设置单元格跨列合并。
语法：<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="50Opx" 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>
		<title>嵌套表格布局页面</title>
	<style>
		body{font-size:3бpx;}
	</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 表单

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

3.4.1 表单标记

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

3.4.2 定义域和域标题

下述为示例代码

<form name="form1" method="post' action="form_maction.jsp" enctype="text/plain">
		<fieldset>
		姓名:<input type="text" name="name"/>性别:
		<legend>个人信息</legend>
		<input type="radio"name="sex"value="male"checked/>男
		<input type="radio" name="sex" value="female"/>女<br/>
		爱好:
		<input type="checkbox'name="c1" value="sing" checked/>唱
		<input type="checkbox"name="c2"value="dance"/>跳舞
		<input type="checkbox"name="c3" value="basketball"/>打篮球
		<input type="checkbox'name='c4"value="score"/>踢足球
		<input type="checkbox" name="c5" value="run"/>长跑
		<br/>
		<input ="file" name="file"/><input>
		</fieldset>
		<fieldset>
		<legend>其他信息</legend>
		请输入您的宝贵意见:
		<textarea name="info" rows="4" cols="50"></textarea>
		<br/>
		请选择职业规划:
		<select name="abc" multiple>
		<option value="s1">前端</option>
		<option value="s2">后端</option>
		<option value="s3">运维</option>
		<option value="s4">测试</option>
		</select>
	</fieldset>
</form>

运行结果如图所示

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
	用户名：<input type="text" name="user"/>
	用户类型：<input type="text" name="usertype" value="普通用户" readonly/>
</form>

3.4.3.2 密码输入框

<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
	密码：<input type="password" name="password"/>
</form>

3.4.3.3 复选框

<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
	爱好：
	<input type="checkbox" name="n1" value="sing" checked/>唱歌
	<input type="checkbox" name="n2" value="dance"/>跳舞
	<input type="checkbox" name="n3" value="basketball"/>打篮球
	<input type="checkbox" name="n4" value="score"/>踢足球
	<input type="checkbox" name="n5" value="run"/>长跑
</form>

3.4.3.4 单选按钮

<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
	性别：
	<input type="radio" name="sex" value="male"/ checked>男
	<input type="radio" name="sex" value="female"/>女<br/>
</form>

3.4.3.5 图像按钮

以下图为插入图片文件设置为按钮并命名为kaishi.png保存在img文件夹中

下述设置图片为按钮的示例代码

<input type="image" name="start" src="img/kaishi.png"/>

以下为示例

3.4.3.6 提交按钮

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

3.4.3.7 重置按钮

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

3.4.3.8 普通按钮

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

3.4.3.9 文件选择框

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

3.4.3.10 隐藏框

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

3.4.4 多行文本输入框

请输入您的宝贵意见
<textarea name="info" rows="4" cols="50"></textarea>

3.4.5 下拉列表框

<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
	<br/>
	请选择课程：
	<select name="job">
		<option value="s1">前端</option>
		<option value="s2">后端</option>
		<option value="s3">运维</option>
		<option value="s4">测试</option>
	</select>
</form>

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

1.示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>达维工作室---联系我们</title>
		<style type="text/css">
			.chu{
				font-weight:bold;
			}
			.zi1{
				font-weight:微软雅黑;
				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="O" 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 widih="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="#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="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">更多&gt;&gt;</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">更多 &gt;&gt;</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="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"/></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>
		<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>

显示运行结果为

标签：表格,标记,单元格,表单,3.4,边框,交互,属性
From： https://blog.csdn.net/2301_80192878/article/details/142367476

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

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 单元格跨列

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章 表格布局与表单交互

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 单元格跨列

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章表格布局与表单交互