最终效果截图：
步骤1
确认这个表格的结构，是4行3列，所以先使用html写一个4行3列的表格并设置其宽高等属性。以下是步骤1源码及效果截图<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" width="600px" height="160px" align="center">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
步骤2
删除第2.3.4行的第一个单元格，然后在第一行第一个单元格设置rowspan="4"使其占据四个单元格，以达到合并单元格的效果。以下是步骤2源码及效果截图<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" width="600px" height="160px" align="center">
<tbody>
<tr>
<td rowspan="4"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
步骤3
删除第一行和第四行的其中一个单元格，并在剩下的一个单元格里设置colspan="2"以使其占据两个单元格，达到合并单元格的效果：<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" width="600px" height="160px" align="center">
<tbody>
<tr>
<td rowspan="4"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</body>
</html>
步骤4
填入文字信息：<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" width="600px" height="160px" align="center">
<tbody>
<tr>
<td rowspan="4">总体信息</td>
<td colspan="2"></td>
</tr>
<tr>
<td>用户名：</td>
<td></td>
</tr>
<tr>
<td>密码：</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</body>
</html>
步骤5
在用户名和密码后的一个单元格设置用户名和密码的输入框：<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" width="600px" height="160px" align="center">
<tbody>
<tr>
<td rowspan="4">总体信息</td>
<td colspan="2"></td>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</body>
</html>
步骤6
在最后一行设置“提交”和“重置”按钮并设置为水平居中：```<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" width="600px" height="160px" align="center">
<tbody>
<tr>
<td rowspan="4">总体信息</td>
<td colspan="2"></td>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="提交">
<input type="button" value="重置">
</td>
</tr>
</tbody>
</table>
</body>
</html>
步骤7
为了美观，把其他文字也分别设置为居中或靠右，同时我发现第一行的高度不对，可以设置为40px:```<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" width="600px" height="160px" align="center">
<tbody>
<tr height="40px">
<td rowspan="4" align="center">总体信息</td>
<td colspan="2"></td>
</tr>
<tr>
<td align="right">用户名：</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="提交">
<input type="button" value="重置">
</td>
</tr>
</tbody>
</table>
</body>
</html>
步骤8
此时的表单还不具备提交的功能，可以把input设置为submit,“重置“也可以设置为input="reset"以使其具备清空输入框的功能,同时需要把整个table标签放入form表单里以上设置才能生效:```<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="">
<table border="1px" cellspacing="0" width="600px" height="160px" align="center">
<tbody>
<tr height="40px">
<td rowspan="4" align="center">总体信息</td>
<td colspan="2"></td>
</tr>
<tr>
<td align="right">用户名：</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
步骤9
在form标签的action属性里填入提交地址,并为输入框添加name属性，以使其真正"提交"到网站的服务器：```<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="https://www.baidu.com">
<table border="1px" cellspacing="0" width="600px" height="160px" align="center">
<tbody>
<tr height="40px">
<td rowspan="4" align="center">总体信息</td>
<td colspan="2"></td>
</tr>
<tr>
<td align="right">用户名：</td>
<td>
<input type="text" name="登录名">
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="密码">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
