本文已参与「新人创作礼」活动，一起开启掘金创作之路
一、table表单制作个人简历信息表单
要点：
1、消除单元格之间的缝隙
2、纵 、横向合并单元格
效果图：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人简历模板（即单元格合并使用）</title>
<style type="text/css">
*{
margin: 50px auto;
text-align: center;
}
/*
消除单元格之间的缝隙
border边框为1像素，cellpadding边距为0
另一种方法
<table border="1px" cellpadding="0">
*/
table {
border-collapse:collapse;
border:1px solid black;
}
td{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<!--
合并行：colspan="合并数目"
合并列：rowspan="合并数目"
-->
<table>
<tr>
<td colspan="7">个人简历</td>
</tr>
<tr>
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td>
</tr>
<tr>
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
</tr>
<tr>
<td>电话</td>
<td colspan="2"></td>
<td>政治面貌</td>
<td colspan="2"></td>
</tr>
<tr>
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr>
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
补充： 1、表单的表头一般都是居中加粗显示的，使用 标签可以直接实现表头的居中加粗的显示效果（th=加粗并水平居中的td） 2、col（colgroup）标签可以设置单元格的宽度，但是一个标签只能设置一行，如若要设置多行可以在标签中加入span属性。即 3、在浏览器检查表单源码时会发现标签。此标签是包含表单主体的部分。由浏览器按照W3C的标准自动生成。规范来说，建议写上
二、用户登陆提交表单
表单提交
提交后
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单提交</title>
<style type="text/css">
table{
width: 600px;
}
tr{
height: 40px;
}
</style>
</head>
<body>
<!--
action属性的值为表单提交的地址。在一个表单中，数据提交地址是一定要写的。
否则表单是没有意义的
-->
<form action="https://www.baidu.com/">
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="4" align="center" >总体信息</td>
<td colspan="2"></td>
</tr>
<tr>
<td align="right">用户名：</td>
<td>
<input type="text" name="uesrname"/>
</td>
</tr>
<tr>
<td align="right">密 码 ：</td>
<td>
<input type="password" name="pwd" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<!-- type的值为button时为普通按钮，值为submit时为提交按钮，值为reset时为重置按钮 -->
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
知识点： 1、form必须要有action属性，表示提交地址 2、所有需要提交的数据，input必须要有name属性 3、input按钮中的文字使用value属性表示 4、input必须放在form标签中才能提交 5、用户名和密码输入框必须给name属性才能提交
补充（input标签中type常用的值）： 1、text：文本输入框 2、password：密码输入框 3、radio：单选框 4、checkbox：复选框 5、button：普通按钮 6、submit：提交按钮 7、reset：重置按钮 8、file：文件选择
