3.1 表格概述
表格是网页中的一个重要容器元素，可包含文字和图像。
3.1.1 表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。
3.1.2 表格的基本语法
常用表格主要通过5个标记来构成：<table>,<caption>,<th>,<tr>和<td>,各标记说明。
<table>
<caption>23软件3班学生名单</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=" " bordercolor=" " bordercolorlight=" " bordercolordark=" ">......</table>
如：
<table border="3px" bordercolor="#0000ff">
<caption>23软件3班学生名单</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.2 表格的宽度和高度属性
通过设置width属性和height，属性可以设置表格的宽度和高度。语法：<table width=" " height=" ">.....</table>
如：
<!--这里是表格的宽度和高度属性-->
<table width="40px" height="30px"> <!--或这里也可以使用百分比的形式设置，如<table width="20%" height="20%">-->
<caption>23软件3班学生名单</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 表格背景颜色与背景图像属性
设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为
表格增添背景图像效果，使表格更加美观。 背景图
语法:
<table bgcolor =" " background=" ">…</table>
(1) bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。
(2)background。设置背景 像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
如：
<!--这里是设置表格背景-->
<table border="3px" bordercolor="#0000ff" width="200px" height="100px" bgcolor="#00aaff">
<caption>23软件3班学生名单</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="3px" bordercolor="#0000ff" width="200px" height="100px" background="img/css.png">
<caption>23软件3班学生名单</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 表格边框样式属性
设置表格标记中的fame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。语法：
<table frame=" " rules=" ">.........内容......</table>
说明：frame和rules属性值及说明如表3-4所示。
<!--这里设置表格边框样式属性-->
<table border="3px" bordercolor="#0000ff" width="200px" height="100px" frame="hsides" rules="all">
<caption>23软件3班学生名单</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.5 表格单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边
框之间的距离。语法：<table cellspacing="" cellpadding=""</table>
(1) cellspacing。值的单位为像素或百分比，默认值为2px。( 2) cellpadding。值的单位为像素或百分比。
如：
<!--单元格的间距-->
<table border="2px" cellspacing="10px">
<caption>23软件3班学生名单</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="2px" cellpadding="10px">
<caption>23软件3班学生名单</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.6 表格水平对齐属性
通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左、居中、居右3种。
语法:
<table align = " left | center | right" > …</table>
如：
<!--表格水平对齐属性-->
<table align="left"><!--(left左对齐,center居中,right右对齐)-->
<caption>23软件3班学生名单</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.7 设置表格的（tr）标记行的属性
通过tr标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
说明:left表示设置行内容居左对齐;center表示设置行内容居中对齐;right表示设置行内容居右对齐。top表示设置行内容顶部对齐;middle表示设置行内容居中对齐;bottom表示设置行内容底部对齐。其中行垂直居中对齐属性值与行水平居中对齐属性值不同。
如：
<!--设置表格的（tr）标记行的属性:align-->
<table border="2px" width="200px" height="150px">
<caption>23软件3班学生名单</caption>
<tr align="left">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="right">
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<!--设置表格的（tr）标记行的属性:valign-->
<table border="2px" width="200px" height="150px">
<caption>23软件3班学生名单</caption>
<tr align="left" valign="top">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center" valign="middle">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="right" valign="bottom">
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
3.2.8 设置单元格的属性
<!--设置单元格的属性：td-->
<table border="2px" width="200px" height="150px">
<caption>23软件3班学生名单</caption>
<tr align="left" valign="top">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center" valign="middle">
<td>1</td>
<td align="right" valign="bottom">张三</td>
<td>男</td>
</tr>
<tr align="right" valign="bottom">
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
3.2.9 表格单元格跨行、跨列属性
1. 单元格跨行
使用单元格td标记的rowspan属性可以设置单元格跨行合并。语法:
<td rowspan="行数">… </td>
说明:rowspan属性可以设置单元格跨行。通过rowspan="n"(n是正整数)，可以设置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个 td 标记。
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="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:00-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 表单标记
表单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>
说明:<form>和</form>之间可包含各种表单信息输入标记。表单标记的属性主要有 name, action，method和enctype等，其属性、取值及说明如表3-7所示。
3.4.2 定义域和域标题
利用 fieldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。 legend标记为fieldset标记定义域标题。语法:
<form>
<fieldset>
<legend alig="left I center | right" >域标题内容</legend></feldset></form>
说明:fieldset标记没有属性，是成对标记。legend标记必须位于fieldset标记内，也是对标记:有一个对齐align属性，属性值分别为left，center和 right。
如：
<form>
<fieldset>
<legend>个人信息</legend>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="male"checked/>男
<input type="radio" name="sex" value="female"/>女
<br />
爱好：
<input type="checkbox" name="n1" value="唱歌" checked/>唱歌
<input type="checkbox" name="n2" value="跳舞"/>跳舞
<input type="checkbox" name="n1" value="打篮球"/>打篮球
<input type="checkbox" name="n1" value="长跑" checked/>长跑
</fieldset>
<fieldset>
<legend>课程评价</legend>
请选择您的课程:
<select name="course" multiple>
<option value="">网页</option>
<option value="">java</option>
<option value="">计算机应用</option>
<option value="">数据库</option>
</select>
</fieldset>
</form>
3.4.3 表单信息输入
表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是input标记，可以输入一行信息。input标记是单个标记。
语法:
<input name="" type=""/>
说明:input 标记的属性主要有name和type等，输入类型是由类型type属性定义的， type 属性有很多不同的值，设置属性值不同，就会产生不同界面效果。input标记的属性、取值及说明如表3-8所示。
1.单行文本输入框
设置inout标记的type属性值为tex，可以实现向表单中插人一个单行文本框。 但是输人的数据只能单行显示，不能换行。
语法:
impau name ="" type="text" maxlength ="" size="" value="" readonly/>
说明:单文本输入框的主要属性有nae，mazlength, wie, value4l readonly,其属性及取值说明如表3-9所示
如：
<form>
用户名：<input type="text" name="user"/>
</form>
2. 密码输入框
设置imput标记的type属性值为password，可以实现向表单中插入一个密码输入框。语法：
<input type="password" name=" "maxlength=" " size=" "/>
说明:密码输入框的主要属性有name，maxlenth 和size，取值及说明与单行文本输入框相同。
如：
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
</form>
3. 复选框
checked是默认复选框。设置input标记的type属性值为checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。
语法:
<input name="" type="checkbox" value="" checked/>
说明:复选框的主要属性有name，value 和checked，其中checked属性用于设置初始预选项。
如：
<form>
姓名：<input type="text" name="name"/>
爱好：
<input type="checkbox" name="n1" value="唱歌" checked/>唱歌
<input type="checkbox" name="n2" value="跳舞"/>跳舞
<input type="checkbox" name="n1" value="打篮球"/>打篮球
<input type="checkbox" name="n1" value="长跑" checked/>长跑
</form>
4. 单选按钮
设置input 标记的type属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法:
<input name=" " type=" radio" value="" checked/>
说明:单选按钮的属性有name，vale和checked等，其属性、取值及说明与复选框相同。
如：
<!--单选按钮-->
<form>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="male"checked/>男
<input type="radio" name="sex" value="female"/>女
<br />
爱好：
<input type="checkbox" name="n1" value="唱歌" checked/>唱歌
<input type="checkbox" name="n2" value="跳舞"/>跳舞
<input type="checkbox" name="n1" value="打篮球"/>打篮球
<input type="checkbox" name="n1" value="长跑" checked/>长跑
</form>
5. 图像按钮
设置input 标记的type属性值为image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插入一张图像，通过src 属性加载图像。
语法:
<input name="" type=" image" src="" width=" " height=""/>
说明:图像按钮主要属性有name,sre,width和height。
如：
<form>
<input type="image" name="start" src="img/start.jpg"/>
</form>
6. 提交按钮
设置input标记的type属性值为submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。语法:
<input name =" " type=" submit" value="提交"/>
说明:提交按钮的属性主要有name和value
如：
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="登录"/><!--登录两字可以改-->
</form>
7. 重置按钮
设置input 标记的type属性值为reset，可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法:
<input name =" "type=" reset" value=""/>
说明:重置按钮的属性主要有name 和value
如：
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="登录"/><!--登录两字可以改-->
<input type="reset"/><!--想要把重置二字改别的字,使用value去改值-->
</form>
8. 普通按钮
设置input标记的type属性值为button，可以实现向表单中插入一个普通按钮。
语法:
<input name =" " type=" button" value="" οnclick=""/>
说明:普通按钮的属性有name，value和onclick
如：
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="登录"/><!--登录两字可以改-->
<input type="reset"/><!--想要把重置二字改别的字,使用value去改值-->
<input type="button" value="注册" οnclick="javascript:alert('注册新用户');"/><!--alert是弹窗-->
</form>
9. 文件选择框
设置input 标记的type属性值为file，可以实现向表单中插入一个文件选择框。语法:
<input name=" " type=" fle" value=""/>说明:
name，定义input标记的名称。
如：
<form>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="male"checked/>男
<input type="radio" name="sex" value="female"/>女
<br />
爱好：
<input type="checkbox" name="n1" value="唱歌" checked/>唱歌
<input type="checkbox" name="n2" value="跳舞"/>跳舞
<input type="checkbox" name="n1" value="打篮球"/>打篮球
<input type="checkbox" name="n1" value="长跑" checked/>长跑
<br />
佐证材料：
<input type="file" name="file"/>
</form>
10. 隐藏框
设置input 标记的type 属性值为hidden，可以实现向表单中插人一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
语法:
<input name=" " type=" hidden" value=""/>
说明:隐藏框的属性有name和value
如：
<form>
<input type="hidden" name="abc" value="123"/>
</form>
3.4.4 多行输入文本框
textarea标记可以向表单中插入多行文本输入框。语法： <textarea name=" " rows=" " cols=" " wrap=" "/>初始信息内容</textarea>
如：
<form>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="male"checked/>男
<input type="radio" name="sex" value="female"/>女
<br />
爱好：
<input type="checkbox" name="n1" value="唱歌" checked/>唱歌
<input type="checkbox" name="n2" value="跳舞"/>跳舞
<input type="checkbox" name="n1" value="打篮球"/>打篮球
<input type="checkbox" name="n1" value="长跑" checked/>长跑
<br />
佐证材料：
<input type="file" name="file"/>
<br />
请填写您的宝贵意见：
<textarea name="info" rows="4" cols="50"></textarea>
</form>
3.4.5 下拉列表框
下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用select 和option标记来在表单中插入下拉菜单和列表项。
语法:
<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标记后面。
如：
<form>
<h3>请选择您的课程:</h3>
<select name="course" multiple>
<option value="">网页</option>
<option value="">java</option>
<option value="">计算机应用</option>
<option value="">数据库</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-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" 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"> </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="196" bgcolor="#FFAF03">
<p class="zibai">地址：广东省江门市XXXXXXXXX<br/>
电话：0750-XXXXXX<br/>
传真：0705-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 class="zibai">&bsp;</p >
<p class="zibai chu"><a href="#">更多 >；>；</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 = "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" > </p>
<p class = "zibai chu"><a href="#">更多 >></a></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="form1" id="form1">
<fieldset>
<legend>用户注册信息</legend>
<table witdh="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="passwprd" 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="textfiled4" 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="checkbos2" 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>
扫一扫
1398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
