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

@-Seven

已于 2024-09-27 14:32:11 修改

阅读量1.3k

点赞数 25

文章标签：交互 android

于 2024-09-24 10:07:06 首次发布

本文链接：https://blog.csdn.net/jinjin77/article/details/142469885

版权

3.1 表格概述

表格是网页中的一个重要容器元素，可包含文字和图像。

3.1.1表格的结构

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

3.1.2表格的基本语法

在HTML中，常用表格主要通过5个标记构成：<table>，<caption>,<th>,<tr>, <td>。

(1)table 标记是成对标记，<table>表示表格开始，</table>表示表格结束。
(2) caption标记是成对标记，<caption>表示标题开始，</caption>表示标题结束。使用 caption标记可以给添加标题，该标应位于table标记与t标记之间的位置。
(3) t(Table Row)标记是成对标记，<r>表示行开始，</tr>表示行结束。
(4) th (Table Heading表头)标记是成对标记，<th>表示表头开始，</th>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明。表头文字内容一般居中、加粗显示。
(5)td(Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束。表头可以用山标记定义，也可以用td标记定义，但<1d></id>两标记之间的内容不自动居中、不加粗。

<!DOCTYPE html>
<html>
   <head>
        <meta charset="UTF-8">
        <title>定义表格</title>
    </head>
    <body>
        <table width =" 700" height=" 150" border="1">
        <caption><h2>23软件技术1班课程表</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>
    </body>
</html>

3.2 表格属性

表格是网页文件中布局的重要元素，制作网页的过程中常常要对网页中的表格做一些设置，对表格的设置实质是对表格标志属性的一些设置。

3.2.1 表格的边框属性

设置表格标记中的边框属性可以改变表格的外观。

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

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

3.2.2 表格的宽度和高度属性

通过设置 width 属性和height，属性可以设置表格的宽度和高度。
(1) width。其单位可以是长度单位或百分比，用于定义表格的宽度。

(2) height。其单位可以是长度单位或百分比，用于定义表格的高度。

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

设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background 属性可以为表格增添背景图像效果，使表格更加美观。
(1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。

(2) background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。

3.2.4表格边框样式

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

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

设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。
(1) cellspacing。值的单位为像素或百分比，默认值为2px。

(2) cellpadding。值的单位为像素或百分比。

3.2.6表格水平对齐属性

通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。

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

表格行t标记的属性用于设置表格某一行的样式。

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

3.2.8设置单元格的属性

表格的列（td）标记的属性可以设置表格单元格的显示风格。

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

1.单元格跨行

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

2.单元格跨列

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

<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: 18px; /* 横线下是3号字 */  
        }  
    </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定义域和域标题

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

3.4.3表单信息输入

表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是input标记，可以输入一行信息。input标记是单个标记。

1.单行文本输入框

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

2.密码输入框

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

3.复选框

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

由于复选择框可以支持多选，每一个复选框都是不同的，一组复选框的所有name属性
"20"sin 应该不同，value属性值也应该不同。

4.单选按钮

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

5.图像按钮

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

6.提交按钮

设置input标记的type属性值为submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。在表单中插入提交按钮时，如果不设置属性value的值，它的初始值是“提交查询按钮”。所以一定要给value属性赋值。

7.重置按钮

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

8.普通按钮

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

9.文件选择框

设置input标记的type 属性值为file，可以实现向表单中插入一个文件选择框。
name，定义 input标记的名称。页面上会自动添加一个文本输人框和一个“浏览……按钮。单击“浏览…”按钮可以从“选择要加载的文件”对话框选择某一个文件，然后自动将文件名称回填到文本输入框中。

10.隐藏框

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

3.4.4多行文本输入框

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

3.4.5下拉列表框

下拉列表通常需要同时使用select和option标记来在表单中插入下拉菜单和列表项。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第三章</title>
	</head>
	<body>
		<fieldset>
			<legend>个人信息</legend>
		<form name="from1" action="" method="post" enctype="text/plain">
			用户名：<input type="text" name="user"/>
			用户类型：<input type="text" name="usertype" value="普通用户" readonly/><br />
			密码：<input type="password" name="user1"/><br />
			<input type="submit" name="sub" value="登录"/><!--提交按钮-->
			<input type="reset" name="resset"/><!--重置按钮-->
			<input type="button" name="button" value="注册" onclick="javascript:alert('注册新用户')"/><!--普通按钮-->
		</form>
		<!--复选框-->
		<form name="form2" method="post" action="form_action.jsp" enctype="text/plain">
			姓名：<input name="name" type="text"/><br />
			性别：<input type="radio" name="sex" value="man"/>男 <input type="radio" name="sex" value="female"/>女
			爱好：
			<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="run" />长跑<br />
			<!--图片按钮-->
			<input type="image" name="start" src="img/13a8b3a054332806e46bdae78a187b9.png"/>
			<input type="file" name="file"/><!--文件选择框--><br />
			<input type="hidden" name="abc" value="123"/><!--隐藏框--><br />
			</fieldset>
			<fieldset>
				<legend>其他信息</legend>
			<h3>请您填写宝贵意见：</h3>
			<textarea name="info" rows="4" cols="50" wrap="virtual"></textarea><!--多行文本输入框-->
			<h3>请选择职业规划：</h3>
			<select name="course" size="4" multiple>
				<option value="c1" selected>c语言程序设计</option>
				<option value="c2" >java程序设计</option>
				<option value="c3" >网页设计与制作</option>
				<option value="c4" >数据结构</option>
				<option value="c1" >计算数学</option>
			</select>/>
		</form>
	 </fieldset>
	</body>
</html>

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

案例1---达维工作室“联系我们”子页

<!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:#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="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" calss="zil">网站首页</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">关于我们</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">团队合作</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">相关作品</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">设计理念</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">人物介绍</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">联系我们</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" aligh="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 />
                                            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="#FC880D">
                                            <p class="zibai">
                                                达维工作室是专业从事互联网相关开发的公司。<br />
                                                专门提供全方面的优质服务和最专业的网站建设方案为企业打造全新的电子平台。<br />
                                                达维工作室成立于2014年,已经成为国内著名的网站建设提供商。多年的风雨历程.......
                                            </p>
                                            <p calss="zibai">&nbsp;</p>
                                            <p calss="zibai chu"><a href="#">更多&gt;&gt;</a></p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="280">
                                <table widht="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"><a href="#">更多&gt;&gt;</a></p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

案例2----用户注册信息

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>用户注册信息</title>
        <style type="text/css">
            fieldset{
                width: 700px;
            }
        </style>
        </head>
        <body>
            <form action="" method="post" enctype="multipart/form-data" name="form" id="form">  
                <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="radio" name="radio" id="radio1" value="radio" checked="checked" />  
                                男<img src="img/Male.gif" width="22" height="21" align="absmiddle"/> 
                                <input type="radio" name="radio" id="radio2" value="radio" />  
                                女<img src="img/Female.gif" width="23" height="21" align="absmiddle"/>
                            </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 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" />  
                                <label for="checkbox">看书</label>  
                                <input type="checkbox" name="checkbox2" id="checkbox2" />  
                                <label for="checkbox2">上网</label>  
                                <input type="checkbox" name="checkbox3" id="checkbox3" />  
                                <label for="checkbox3">打球</label>  
                            </td>  
                        </tr>  
                        <tr>  
                            <td width="200" align="right">相片：</td>  
                            <td><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>