3.1表格概述
表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使内容显示的一目了然。以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序地显示在页面上，在网页设计中能将网页分成多个任意的区域。
3.1.1表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。表格中的内容按照相应的行或列进行分类和显示。
3.1.2表格的基本语法
<table>
<caption>表格标题</caption>
<tr>
<th></th><!--表头文字一般居中，加粗-->
<th></th>
<th></th>
</tr>
<tr>
<td></td><!--其中内容不自动居中，不加粗-->
<td></td>
<td></td>
</tr>
...
</table>主要由以下五个标记构成
3.2表格属性设置
表格是网页文件中布局的重要元素，而对表格的设置实质是对表格标记属性的一些设置
表格属性表如下图所示
3.2.1表格边框属性
<table border= " " bordercolor= " " bordercolorlight=" " bordercolordark= " " >...</table> (1)border属性。用于设置边框的粗细，单位是像素。
(2)bordereolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名称。
(3)bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。
(4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。
3.2.2表格的宽度和高度属性
<table width=" "height= " " >...</table>(1)width。其单位可以是长度单位或百分比，用于定义表格的宽度。
(2)height。其单位可以是长度单位或百分比，用于定义表格的高度，设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改而自动调整。
3.2.3表格背景颜色与背景图像属性
<lable bgcolor= " " background= " " >...</table>(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色。
(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
3.2.4表格边框样式属性
<table frame=" " rules=" ">...内容...</table>frame（表格边框）和rules（表格内部边框）常见属性值及说明如下图所示
3.2.5 表格单元格间距、单元格边距属性
<table cellspacing=" " cellpadding=" ">...</table> (1)celspacing属性。可以改变表格单元格之间的间隔，值的单位为像素或百分比，默认值为 2px。
(2)ellpadding属性。可以增加表格单元格的内容与内部边框之间的距离，值的单位为像素或百分比。
3.2.6表格水平对齐属性
通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左(默认）、居中、居右3种。
<table align ="left | center | right" >...</table>3.2.7 设置表格的(tr)标记行的属性
表格行tr 标记的属性用于设置表格某一行的样式
<table align = "center" >
<tr align ="left | center | right" valign="top | middle | bottom" >
<td>...</td>
</tr>
...
</table>left（左对齐）center（居中对齐）right（右对齐）。top（顶部对齐）middle（行内容居中对齐）bottom（行内容底部对齐）。其中行垂直居中对齐属性值与行水平居中对齐属性值不同。
tr标记的属性表如下图所示
3.2.8 设置单元格的属性
表格的列td标记的属性可以设置表格单元格的显示风格。
td标记的属性表如下图所示
3.2.9 表格单元格跨行、跨列属性
1.单元格跨行
<td rowspan="行数">...</td>rowspan属性可以设置单元格跨行合并。通过 rowspan="n"(n是正整数)，可以设置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个td 标记。
2.单元格跨列
<td colspan="列数">...</td>colspan 属性可以设置单元格跨列合并。通过 colspan="n"(n是正整数)，可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除 n-1 个 td 标记。
3.3表格嵌套
<table>
<tr>
...
</tr>
<tr>
<td><!--单元格内嵌套表格-->
<table>
<tr>
...
</tr>
</table>
</td>
</tr>
<tr>
...
</tr>
</table>3.4表单
一个完整的交互表单由两部分组成:
1、是客户端包含的表单页面，用于填写浏览者进行交互的信息
2、是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输入信息，然后将这些信息提交给服务器
服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。
3.4.1表单标记
表单form 标记为成对标记，以<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>表单标记属性，取值及说明如下图所示
3.4.2 定义域和域标题
利用fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果或者可创建一个子表单来处理这些元素。legend标记为fieldset标记定义域标题。
<form>
<fieldset>
<legend alig="left | center |right">域标题内容</legend>
</fieldset>
</form>3.4.3 表单信息输入
表单的主要功能是为用户提供输入信息的接口，将输人信息发送到服务器并等待服务响应。表单中输入信息的标记是input 标记，可以输人一行信息。input 标记是单个标记。
<input name=" " type= " "/>表单信息输入标记属性、取值及说明如下图所示
1.单行文本输入框
设置input 标记的type 属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输人任意类型的数据，但是输入的数据只能单行显示，不能换行。
<input name=" " type= "text" maxlength=" " size=" " value=" " readonly/>文本输入框标记属性、取值及说明如下图所示
2.密码输入框
设置input 标记的type属性值为 password,可以实现向表单中插入一个密码输人框。密码输人框中可以输人任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“·”所取代，这样设计可以保障用户输入的密码不被泄露。
<input name= " " type= "password" maxlength =" " size = " "/>
3.复选框
设置input标记的type属性值为checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。
<input name=" " type="checkbox" value=" " checked/>复选框属性、取值及说明如下图所示
由于复选择框可以支持多选，每一个复选框都是不同的，一组复选框的所有name属性应该不同，value 属性值也应该不同。
4.单选按钮
设置 input 标记的type 属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
<input name = " " type = "radio" value=" "checked/>
由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同。
5.图像按钮
设置input标记的type属性值为image，可以实现向表单中插人一个图像按钮，用户可利用图像按钮在网页中插入一张图像，通过src属性加载图像。
<input name=" " type="image" src=" " width=" " height=" "/>图像按钮属性、取值及说明如下所示
6.提交按钮
设置 input 标记的type 属性值为 submit,可以实现向表单中插入一个提交按钮，,钮用于将表单的信息提交至服务器进行处理。
<input name=" " type="submit" value="提交"/>在表单中插人提交按钮时，如果不设置属性value的值，它的初始值是“提交查询钮”。所以一定要给 value 属性赋值。
7.重置按钮
设置input标记的type属性值为reset，可以实现向表单中插入一个重置按钮，重置按用于将表单中所有的输人信息清空，然后让用户可以重新填写。
<input name = " " type = "reset" value = " "/>
8.普通按钮
设置imput标记的type属性值为button，可以实现向表单中插入一个普通按钮。普通钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
<input name=" " type="button" value = " " onclick = " "/>9.文件选择框
设置input标记的type属性值为file，可以实现向表单中插入一个文件选择框。
<input name= " "type= "file" value = " "/>name，定义imput标记的名称。页面上会自动添加一个文本输入框和一个“浏览…”按钮。单击“浏览…”按钮可以从“选择要加载的文件”对话框选择某一个文件，然后自动将文件名称回填到文本输人框中。
10.隐藏框
设置input 标记的type属性值为 hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
<inpat name= " " type = "hidden" value = " "/>
3.4.4 多行输入框
textarea 标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。
<textarea name=" "rows=" "cols=" "wrap=" "/>初始信息内容</textarea>
默认情况下，当用户在文本区域中输入文本后，浏览器会将它们按照输人时的状态发送给服务器。只有在用户按下Enter键的地方生成换行。
多行文本输入框属性、取值及说明如下图所示
3.4.5 下拉列表框
下拉列表可以在表单中接收用户的输人。
<select name=" " size=" " multiple>
<option value=" " selected>文字信息1</ option>
<option value=" ">文字信息 2</option>
...
</select>select标记是成对标记，option标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有name，size 和 multiple 等属性。option 标记有 value 和 selected 等属性。select标记与 option 标记必须配合使用。每一选项必须指定一个显示的文本和一个 value值，显示文本通常附在 option 标记后面。
select 和 option 标记属性、取值及说明如下图所示
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" align="center" cellpadding="0" cellspacing="5">
<tr>
<td width="100" align="center" valign="middle" bgcolor="#ffffff">
<img src="img/ba.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" cellspacing="20" cellpadding="0">
<tr>
<td height="318"> </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="30" bgcolor="#ffaf03">
<p class="zibai">地址:广东省江门市XXXXXXXXX<br />
电话:0750-XXXXXX<br />
传真:0750-XXXXXX<br />
QQ:12345678<br />
电子邮箱:<br />
123@163.com<br />
工作室网站:<br />
www.XXX.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"> </p>
<p class="zibai chu"><a href="#">更多>></a></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="332" valign="top" bgcolor="#66a00e">
<p class="zi2">我们的团队</p>
<p class="zibai">成员都具有多年的实际设计工作经验,满足客户的国际化需求设计师创意的思维模式,提供最适合的设计方案.</p>
<p class="zi2">我们的承诺:</p>
<p class="zibai">本工作室设计与制作的网站均属原创、不套用网上的任何模板根据每个公司特点,设计出属于客户……</p>
<p class="zibai"> </p>
<p class="zibai chu"><a href="#">更多>></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>运行结果如下图所示
案例二：用户注册信息
利用表单制作一个“用户注册信息”表。
具体代tu
<!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 ="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="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>运行结果如下所示
扫一扫
1308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
