3.表单样式排版（利用表格）

最新推荐文章于 2022-11-08 23:56:36 发布

涂apple

最新推荐文章于 2022-11-08 23:56:36 发布

阅读量270

点赞数 1

本文链接：https://blog.csdn.net/tqptr_opqww/article/details/119462021

版权

这篇博客展示了如何使用HTML表格元素来设计和排版一个注册页面，包括用户名、密码、性别选择、兴趣爱好、生日选择以及头像选择等字段，提供了清晰的布局和交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在第2节末尾，设计了一个表单，是关于注册页面的设计，接下来结合表格的知识对之前设计好的界面进行排版。

在这里插入图片描述
很明显这个排版不准确也不整齐，接下来利用表格进行调整。
代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册页面</title>
</head>
<body>
	<form action="" method="post">
	<table border="0" width="500px">
		<tr>
			<td align="right">请输入用户名：</td>
			<td><input type="text" name="" id=""></td>
		</tr>
		<tr>
			<td align="right">请输入密码：</td>
			<td><input type="password" name="" id=""></td>
		</tr>
		<tr>
			<td align="right">再次输入密码：</td>
			<td><input type="password" name="" id=""></td>
		</tr>
		<tr>
			<td align="right">性别：</td>
			<td>
				<input type="radio" name="sex" id="" checked="checked">男
			    <input type="radio" name="sex" id="">女
			</td>
		</tr>
		<tr>
			<td align="right">兴趣爱好：</td>
			<td>
				<input type="checkbox" name="" id="">看书
				<input type="checkbox" name="" id="">旅游
				<input type="checkbox" name="" id="">思考
				<input type="checkbox" name="" id="">爬山
			</td>
		</tr>
		<tr>
			<td align="right">生日：</td>
			<td>
				<select>
					<option value="1995">1995</option>
					<option value="1996" selected="selected">1996</option>
					<option value="1997">1997</option>
					<option value="1998">1998</option>
					<option value="1999">1999</option>
					<option value="2000">2000</option>
				</select>年
				<select>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>月
				<select>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
					<option value="26">26</option>
					<option value="27">27</option>
					<option value="28">28</option>
					<option value="29">29</option>
					<option value="30">30</option>
					<option value="31">31</option>
				</select>日
			</td>
		</tr>
		<tr>
			<td align="right">头像：</td>
			<td>
				<img src="image/headLogo/13.gif">
				<select>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
				</select>
			</td>
		</tr>
		<tr>
			<td align="center" colspan="2">
				<input type="submit" value="注册">
			</td>
		</tr>
	</table>
</form>
</body>
</html>