HTML制作简易个人简历（表单）

《个人简历》练习效果图如下：

说明：“个人简历”是居于桌面中央

制作步骤：

1、表格标题居于第一行并加粗，添加外边框（边框宽度随自己定），代码如下：

<tr>
        <th><b> 个人简历</b></th>
    </tr>
    <table border="1">
<tr>

2、制作表格第一行（包括照片栏），代码如下：

<tr>
        <form>
            <td width="160"height="30">姓名</td>
            <td ><input type="text"name="姓名"></td> 
            <td width="160"height="30">性别</td>
            <td ><input type="text"name="性别"></td>
            <td width="160"height="30">出生年月</td>
            <td><input type="text"name="出生年月"></td>
            <td rowspan="4"width="120"height="30"><input type="file"></td>
        </form>
</tr>

说明：因为表单文本字段的默认宽度是 20 个字符，所以为了看着舒服^_^，我把表单的宽度设为160，高设为30.照片列是跨四行，所以rowspan="4",宽和高可以自己去匹配。

3、二三行一样，第四行注意“毕业学校”和他的对应的文本字段是跨列的，代码如下：

<tr>
        <form>
            <td width="160"height="30">专业</td>
            <td ><input type="text"name="专业"></td>
            <td colspan="2">毕业学校</td>
            <td colspan="2"><input type="text"name="毕业学校"></td>  
        </form>
</tr>

4、 “特长、技能或爱好”行是横穿整行的，所以应用表格，代码如下：

<tr>
        <td colspan="8">技能、特长或爱好</td>
</tr>

5、“时间”、“单位”、“经历”列和其对应的文本单元的代码如下：

<tr>
        <form>
            <td width="160"height="30">时间</td>
            <td colspan="2">单位</td>
            <td colspan="6">经历</td>
        </form>
</tr>
<tr>
        <form>
            <td><input type="text"name="时间"></td>
            <td colspan="2"><input type="text"name="单位"></td>
            <td colspan="6"><input type="text"name="经历"></td>
        </form>
</tr>

6、后面基本没什么难处，运行后情况如下：

我们需要文本文字居中及消除表单文本字段中的内方框，代码如下：

<style>
        body{text-align:center}
</style>

<style>
        input{
            border:0px;
            width:90%;
        }
</style>

不足之处：无法检测性别、出生年月、Email、联系电话等输入是否符合规范，还需加强。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ge ren jian li </title>
    <!--文字居中-->
    <style>
        body{text-align:center}
    </style>
    <!--消除表单内方框-->
    <style>
        input{
            border:0px;
            width:90%;
        }
    </style>
    
</head>
<body>
    <tr>
        <th><b> 个人简历</b></th>
    </tr>
    <table border="1">
    <tr>
        <form>
            <td width="160"height="30">姓名</td>
            <td ><input type="text"name="姓名"></td> 
            <td width="160"height="30">性别</td>
            <td ><input type="text"name="性别"></td>
            <td width="160"height="30">出生年月</td>
            <td><input type="text"name="出生年月"></td>
            <td rowspan="4"width="120"height="30"><input type="file"></td>
        </form>
    </tr>
    <tr>
        <form>
            <td width="160"height="30">民族</td>
            <td ><input type="text"name="民族"></td> 
            <td width="160"height="30">政治面貌</td>
            <td ><input type="text"name="政治面貌"></td>
            <td width="160"height="30">身高</td>
            <td><input type="text"name="身高"></td>
        </form>
    </tr> 
    <tr>
        <form>
            <td width="160"height="30">学制</td>
            <td ><input type="text"name="学制"></td>
            <td width="160"height="30">学历</td>
            <td ><input type="text"name="学历"></td>
            <td width="160"height="30">户籍</td>
            <td><input type="text"name="户籍"></td>
        </form>
    </tr>
    <tr>
        <form>
            <td width="160"height="30">专业</td>
            <td ><input type="text"name="专业"></td>
            <td colspan="2">毕业学校</td>
            <td colspan="2"><input type="text"name="毕业学校"></td>  
        </form>
    </tr>
    <tr>
        <td colspan="8">技能、特长或爱好</td>
    </tr>
    <tr>
        <form>
            <td width="160"height="30">外语等级</td>
            <td colspan="2"><input type="text"name="外语等级"></td>
            <td width="160"height="30">计算机</td>
            <td colspan="4"><input type="text"name="计算机"></td> 
        </form>
    </tr>
    <tr>
        <td colspan="8">个人履历</td>
    </tr>
    <tr>
        <form>
            <td width="160"height="30">时间</td>
            <td colspan="2">单位</td>
            <td colspan="6">经历</td>
        </form>
    </tr>
    <tr>
        <form>
            <td><input type="text"name="时间"></td>
            <td colspan="2"><input type="text"name="单位"></td>
            <td colspan="6"><input type="text"name="经历"></td>
        </form>
    </tr>
    <tr>
        <form>
            <td><input type="text"name="时间"></td>
            <td colspan="2"><input type="text"name="单位"></td>
            <td colspan="6"><input type="text"name="经历"></td>
        </form>
    </tr>
    <tr>
        <form>
            <td><input type="text"name="时间"></td>
            <td colspan="2"><input type="text"name="单位"></td>
            <td colspan="6"><input type="text"name="经历"></td>
        </form>
    </tr>
    <tr>
        <td colspan="8">联系方式</td>
    </tr>
    <tr>
        <form>
            <td width="160"height="30">Email</td>
            <td colspan="2"><input type="email"name="Email"></td>
            <td width="160"height="30">联系电话</td>
            <td colspan="4"><input type="number"name="联系电话"></td>
        </form>
    </tr>
    <tr>
        <form>
            <td width="160"height="30">通信地址</td>
            <td colspan="2"><input type="text"name="通信地址"></td>
            <td width="160"height="30">邮编</td>
            <td colspan="4"><input type="text"name="邮编"></td>
        </form>
    </tr>
    <tr>
        <td colspan="8">自我评价</td>
    </tr>
</body>
</html>

更多推荐

HTML制作简易个人简历（表单）