代码

  • 1、实现下面界面的代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度注册网页</title>
</head>
<body>
	<form action="" method="post">
		<table width="600"  cellspacing="15"  align="center">
		<!--第一行设置-->
		<tr height = "120">
			<td>
				<img src="logo_baidu.jpg">
			</td>
			<td></td>
		</tr>

		<!--第二行设置-->
		<tr>
			<td>
				<h3>添加注册信息</h3>
			</td>
			<td></td>
		</tr>

		<!--第三行设置-->
		<tr>
			<td align="right">邮箱:</td>
			<td >
				  <input type="text" name="username">
			</td>
		</tr>

		<!--第4行设置-->
		<tr>
			<td align="right">密码:</td>
			<td >
				<input type="password" name="pwd">
			</td>
		</tr>

		<!--第5行设置-->
		<tr>
			<td align="right">确认密码:</td>
			<td >
				 <input type="password" name="repwd">
			</td>
		</tr>

		<!--第6行设置-->
		<tr >

			<td align="right">验证码:</td>
			
			<td>
				 <table>
				 	<tr>
				 		<td> <input type="text" name="myname"> </td>
				 		<td> <input type="image" src="yz.jpg"> </td>
				 		<td> <a href="#">注册用户</a> </td>
				 	</tr>
				 </table>
			</td>
		</tr>

		<!--第7行设置-->
		<tr>
			<td ></td>
			<td >
				 <input type="checkbox" name="select" />我已阅读并接受<a href="#">《百度用户协议》</a>
			</td>
		</tr>

		<!--第8行设置-->
		<tr>
			<td ></td>
			<td >
				 <table width="80%">
				 	<tr>
				 		<td><input type="image" src="button.jpg"></td>
				 		<td>
				 			<input type="reset" value ="重新填写">
				 		</td>
				 	</tr>
				 </table>
			</td>
		</tr>
		
	</table>
	</form>
</body>
</html>

总结:
1) 当确定一行几个单元格时,那就要保证一行有n个单元格标签(<td> </td>)
2)<input type="image" src="yz.jpg"> </td><img src="logo_baidu.jpg">区别:第一个输入的图片是可以点击的,第二个只是一张图片,点击图片不会动。
3)对齐方式,根据图形界面的需要,进行相关调整
4)单元格内可以插入单元格

原文链接:加载失败,请重新获取