这是自己做的一个小练习
1. QQ免费申请
用到了表格嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<table width="70%" align="center" cellpadding="5">
<caption>免费QQ申请</caption>
<tr>
<td bgcolor="blue">基本信息</td>
</tr>
<tr>
<td>
<table align="center" width="500px">
<tr>
<td width="120px">*昵称:</td>
<td><input type="text" style="width: 300px"></td>
</tr>
<tr>
<td width="120px">*年龄:</td>
<td><input type="text" style="width: 300px"></td>
</tr>
<tr>
<td width="120px">*性别:</td>
<td>
<input type="radio" name="sex" >男
<input type="radio" name="sex">女
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="blue">设置密码</td>
</tr>
<tr>
<td>
<table align="center" width="500px">
<tr>
<td width="120px"> *密码:</td>
<td><input type="password" style="width: 300px"></td>
</tr>
<tr>
<td width="120px">*确认密码:</td>
<td><input type="password" style="width: 300px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="blue">所在地区</td>
</tr>
<tr>
<td>
<table width="500px" align="center">
<tr>
<td width="120px">*国家:</td>
<td>
<select name="" id="" style="width: 300px">
<option value="中华人民共和国" >中华人民共和国</option>
<option value="美国">美国</option>
<option value="英国">英国</option>
</select>
</td>
</tr>
<tr>
<td width="120px">*省份:</td>
<td>
<select name="" id="" style="width: 300px">
<option value="陕西">陕西</option>
<option value="江苏">江苏</option>
<option value="四川">四川</option>
</select>
</td>
</tr>
<tr>
<td width="120px">*城市:</td>
<td>
<select name="" id="" style="width: 300px">
<option value="西安">西安</option>
<option value="苏州">苏州</option>
<option value="成都">成都</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="blue">密码保护信息</td>
</tr>
<tr>
<td>请填写密码保护信息,用于丢失密码时,找回密码!</td>
</tr>
<tr>
<td>
<table align="center" width="500px">
<tr>
<td width="120px">*问题1:</td>
<td>
<select name="" id="" style="width: 300px">
<option value="">请选择提示问题</option>
</select>
</td>
</tr>
<tr>
<td width="120px">*答案1:</td>
<td><input type="text" style="width: 300px"></td>
</tr>
<tr>
<td width="120px">*问题2:</td>
<td>
<select name="" id="" style="width: 300px">
<option value="">请选择提示问题</option>
</select>
</td>
</tr>
<tr>
<td width="120px">*答案2:</td>
<td><input type="text"style="width: 300px"></td>
</tr>
<tr>
<td colspan="2">请填写电子邮件地址,可用于“密码找回”和“密码申诉”等操作。</td>
</tr>
<tr>
<td width="120px">安全邮件地址:</td>
<td><input type="text" style="width: 300px"></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="blue">
<td>相关条款服务
<br>
<input type="checkbox">我同意<a href="">《腾讯QQ用户服务条款》</a>
</td>
</tr>
<tr align="center">
<td><input type="submit"></td>
</tr>
</table>
</form>
</body>
</html>
出来的效果图
2、在线订单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<table align="center" width="40%" cellpadding="5" cellspacing="0">
<tr bgcolor="#7fff00">
<td width="100px">产品名称:</td>
<td><input type="text" style="width: 200px"> *</td>
</tr>
<tr bgcolor="#ffefd5">
<td width="100px">定购数量:</td>
<td><input type="text" style="width: 150px"></td>
</tr>
<tr bgcolor="#7fff00">
<td width="100px">付款方式:</td>
<td>
<select name="" id="">
<option value="-付款方式-">-付款方式-</option>
</select> *
</td>
</tr>
<tr bgcolor="#ffefd5">
<td width="100px">公司名称:</td>
<td><input type="text" style="width: 200px"></td>
</tr>
<tr bgcolor="#7fff00">
<td width="100px">联系电话:</td>
<td><input type="text" style="width: 150px"> *</td>
</tr>
<tr bgcolor="#ffefd5">
<td width="100px">联系人:</td>
<td><input type="text" style="width: 150px"> *</td>
</tr>
<tr bgcolor="#7fff00">
<td width="100px">传真:</td>
<td><input type="text" style="width: 150px"></td>
</tr>
<tr bgcolor="#ffefd5">
<td width="100px">联系地址:</td>
<td><input type="text" style="width: 200px"> *</td>
</tr>
<tr bgcolor="#7fff00">
<td width="100px">邮政编码:</td>
<td><input type="text" style="width: 150px"></td>
</tr>
<tr bgcolor="#ffefd5">
<td width="100px">联系E_mail:</td>
<td><input type="text" style="width: 180px"> *</td>
</tr>
<tr bgcolor="#7fff00">
<td width="100px">公司网址:</td>
<td><input type="text" style="width: 180px"></td>
</tr>
<tr bgcolor="#ffefd5">
<td colspan="2" align="center"><input type="button" value="递交"\> <input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>
效果图