HTML表单制作个人简历

最新推荐文章于 2024-03-03 19:55:32 发布

不会编程的师范人

最新推荐文章于 2024-03-03 19:55:32 发布

阅读量1.8k

点赞数 3

文章标签： html5

本文链接：https://blog.csdn.net/qq_44396242/article/details/117474009

版权

先看在谷歌浏览器中的效果

在这里插入图片描述
表单常用标签：

border：设置表格的边框
cellspacing：单元格与单元格之间的距离
bgcolor：表格的背景色
colspan：跨列数
rowspan：跨行数

table>(tr>td*n)*m 可生成一个m行n列的表格
例如生成一个2行3列的表格
在这里插入图片描述

HTML代码实现：

<!DOCTYPE html>
<html lang="cn">
<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">
    <style>
        /* 设置表格的宽和高，单元格文本框溢出隐藏 */
        td{width: 100px;overflow: hidden;} 
        tr{height: 35px;}
        /* 设置输入框的大小沾满整个单元格 */
        input{border: 0;
            width: 100%;
            height: 100%;
            outline: none;
            text-align: center;}
    </style>    
    <title>resume</title>
</head>
<body>
    <h2 style="text-align: center;">个人简历</h2>
    <form>
        <table border="1" align="center" cellspacing="0">
            <tbody align="center">
                <tr>
                    <td bgcolor="#ededed">姓名</td>
                    <td><input type="text"></td>
                    <td bgcolor="#ededed">性别</td>
                    <td><input type="text"></td>
                    <td bgcolor="#ededed">出生年月</td>
                    <td><input type="text"></td>
                    <td style="width: 120px;" align="left" rowspan="4"></td>
                </tr>
                <tr>
                    <td bgcolor="#ededed">名族</td>
                    <td><input type="text"></td>
                    <td bgcolor="#ededed">政治面貌</td>
                    <td><input type="text"></td>
                    <td bgcolor="#ededed">身高</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td bgcolor="#ededed">学制</td>
                    <td><input type="text"></td>
                    <td bgcolor="#ededed">学历</td>
                    <td><input type="text"></td>
                    <td bgcolor="#ededed">户籍</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td bgcolor="#ededed">专业</td>
                    <td><input type="text"></td>
                    <td colspan="2" bgcolor="#ededed">毕业学校</td>
                    <td colspan="2"><input type="text"></td>
                </tr>
                <tr>
                    <td colspan="7"><b>技能、特长或爱好</b></td>
                </tr>
                <tr>
                    <td bgcolor="#ededed">外语等级</td>
                    <td colspan="2"><input type="text"></td>
                    <td bgcolor="#ededed">计算机</td>
                    <td colspan="3"><input type="text"></td>
                </tr>
                <tr>
                    <td colspan="7"><b>个人履历</b></td>
                </tr>
                <tr>
                    <td bgcolor="#ededed">时间</td>
                    <td colspan="2" bgcolor="#ededed">单位</td>
                    <td colspan="4" bgcolor="#ededed">经历</td>
                </tr>
                <tr>
                    <td><input type="text"></td>
                    <td colspan="2"><input type="text"></td>
                    <td colspan="4"><input type="text"></td>
                </tr>
                <tr>
                    <td><input type="text"></td>
                    <td colspan="2"><input type="text"></td>
                    <td colspan="4"><input type="text"></td>
                </tr>
                <tr>
                    <td><input type="text"></td>
                    <td colspan="2"><input type="text"></td>
                    <td colspan="4"><input type="text"></td>
                </tr>
                <tr>
                    <td colspan="7"><b>联系方式</b></td>
                </tr>
                <tr>
                    <td bgcolor="#ededed">联系电话</td>
                    <td colspan="2"><input type="text"></td>
                    <td bgcolor="#ededed">通信地址</td>
                    <td colspan="3"><input type="text"></td>
                </tr>
                <tr>
                    <td bgcolor="#ededed">E-mail</td>
                    <td colspan="2"><input type="email"></td>
                    <td bgcolor="#ededed">邮编</td>
                    <td colspan="3"><input type="text"></td>
                </tr>
                <tr>
                    <td colspan="7"><b>自我评价</b></td>
                </tr>
                <tr style="height: 110px;">
                    <td colspan="7"><input type="text"></td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

不会编程的师范人

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
HTML表单制作个人简历

**先看在谷歌浏览器中的效果表单常用标签：border：设置表格的边框cellspacing：单元格与单元格之间的距离bgcolor：表格的背景色colspan：跨列数rowspan：跨行数HTML代码实现：<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
复制链接

扫一扫