HTML简单个人简历前端页面

最新推荐文章于 2024-10-02 12:00:45 发布

_远方_

最新推荐文章于 2024-10-02 12:00:45 发布

阅读量1.2k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_46578318/article/details/117480175

版权

一、知识点介绍

1.表格行合并：rowspan 将多行合并成一行。

2.表格列合并：colspan 将多列合并成一列。

3.表单元素（input）:<input> 元素根据不同的 type 属性，可以变化为多种形态。如text,data等。

二、代码

完整代码如下：

<!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>个人简历</title>
</head>
<body>
    <h3 align="center">个人简历</h3>
    <form action="#",method="POST">
    <table align="center" border="1" >
        <tr>
            <td align="center">姓名</td>
            <td><input type="text" name="name"></td>
            <td align="center">性别</td>
            <td><input type="text" name="sex"></td>
            <td align="center">出生年月</td>
            <td><input type="date" name="data"></td>
            <td rowspan="4"><input type="file" name="image"></td>
        </tr>
        <tr>
            <td align="center">民族</td>
            <td align="center"><input type="text" name="nation"></td>
            <td>政治面貌</td>
            <td><input type="text" name="politics"></td>
            <td align="center">身高</td>
            <td style="width: min-content;"><input type="text" name="hight"></td>
        </tr>
        <tr>
            <td align="center">学制</td>
            <td><input type="text" name="xuezhi"></td>
            <td align="center">学历</td>
            <td><input type="text" name="education"></td>
            <td align="center">户籍</td>
            <td><input type="text" name="household"></td>
        </tr>
        <tr>
            <td align="center">专业</td>
            <td><input type="text" name="major"></td>
            <td colspan="2" align="center">毕业学校</td>
            <td colspan="2"><input type="text" name="school" style="width: 97%;"></td>
        </tr>
        <tr>
            <td colspan="7" align="center"><strong>特长、技能或爱好</strong></td>
        </tr>
        <tr>
            <td align="center">外语等级</td>
            <td colspan="2"><input type="text" name="garde" style="width: 97%;"></td>
            <td align="center">计算机</td>
            <td colspan="4"><input type="text" name="computer" style="width: 98%;"></td>
        </tr>
        <tr>
            <td colspan="7" align="center">个人履历</td>
        </tr>
        <tr>
            <td align="center">时间</td>
            <td colspan="2" align="center">单位</td>
            <td colspan="4" align="center">经历</td>
        </tr>
        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text" style="width: 97%;"></td>
            <td colspan="4"><input type="text" style="width: 99%;"></td>
        </tr>
        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text" style="width: 97%;"></td>
            <td colspan="4"><input type="text" style="width: 99%;"></td>
        </tr>
        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text" style="width: 97%;"></td>
            <td colspan="4"><input type="text" style="width: 99%;"></td>
        </tr>
        <tr>
            <td colspan="7" align="center">联系方式</td>
        </tr>
        <tr>
            <td align="center">通信地址</td>
            <td colspan="2"><input type="text" name="address" style="width: 97%;"></td>
            <td align="center">联系电话</td>
            <td colspan="4"><input type="text" name="phone" style="width: 98%;"></td>
        </tr>
        <tr>
            <td align="center">E-mail</td>
            <td colspan="2"><input type="text" name="mail" style="width: 97%;"></td>
            <td align="center">邮编</td>
            <td colspan="3"><input type="text" name="postcode" style="width: 98%;"></td>
        </tr>
        <tr>
            <td colspan="7" align="center">自我评价</td>
        </tr>
    </table>
</form>
</body>
</html>