html：运用表单表格制作简易个人简历

admin管理员组

文章数量:1794759

html：运用表单表格制作简易个人简历

 

 代码如下：

html部分：

<div class="all"> <header> <h1>个人简历</h1> </header> <main> <table border="1" align="center"> <tbody> <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></td> <td>状况</td> <td></td> </tr> <tr> <td>政治面貌</td> <td></td> <td>身高</td> <td></td> <td>外语程度</td> <td></td> </tr> <tr> <td>所在学院</td> <td></td> <td>学历</td> <td></td> <td>健康状态</td> <td></td> </tr> <tr> <td>所学专业</td> <td colspan="2"></td> <td colspan="2">特长</td> <td colspan="2"></td> </tr> <tr> <td>毕业时间</td> <td colspan="2"></td> <td colspan="2">曾任职务</td> <td colspan="2"></td> </tr> <tr> <td rowspan="3">家庭住址</td> <td colspan="2" rowspan="3"></td> <td colspan="2">联系电话</td> <td colspan="2"></td> </tr> <tr> <td colspan="2">个人微信</td> <td colspan="2"></td> </tr> <tr> <td colspan="2">E-mail</td> <td colspan="2"></td> </tr> <tr> <td>主修课程</td> <td colspan="6"></td> </tr> <tr> <td>获得证书</td> <td colspan="6"></td> </tr> <tr> <td>熟悉软件</td> <td colspan="6"></td> </tr> <tr> <td>个人特点</td> <td colspan="6"></td> </tr> <tr> <td rowspan="3">应聘岗位及个人特长和能力</td> <td colspan="6" rowspan="3"></td> </tr> <tr> </tr> <tr> </tr> <tr> <td rowspan="2">社会实践和经历</td> <td rowspan="2" colspan="6"></td> </tr> <tr> </tr> <tr> <td colspan="7">相信您的信任与实力将会为我们带来共同的成功!希望我能为咱们公司贡献自己的力量</td> </tr> </tbody> </table> </main> </div>

css部分：

<style> .all { margin: 0 auto; } td,h1{ text-align: center; font-size: 30px; font-weight: bold; } /* 合并单元格 */ tr{ height: 83px; } td { width: 222px; } table{ border-collapse: collapse; } </style>

整体不难，难点也就在于对于表格宽高的设置以及合并单元格部分。

谢谢大家观看我们下期再见！

本文标签： 表单个人简历简易表格html