HTML+CSS实例：简单朴素的个人简历模板（HTML表格使用+css样式渲染）

持久的棒棒君

已于 2022-03-19 22:35:42 修改

阅读量5.1k

点赞数 12

分类专栏：大杂烩

于 2022-03-19 01:04:11 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/123542594

版权

css html 前端

大杂烩专栏收录该内容

259 篇文章 3 订阅

订阅专栏

个人简历模板

丑是丑了点，没有那么花里胡哨。。。

先看展示

在这里插入图片描述

代码实现

<!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>
    <style type="text/css">
    	/*表格整体样式*/
        table{
            border:1px solid black;
            width: 800px;
            /* 让表格位于网页中间 */
            margin: auto;
            /* 合并表格与单元格之间的边框，单元格与单元格之间的边框 */
            border-collapse: collapse;
            margin-bottom: 80px;
        }
        /*给标题文字设置大小*/
        caption{
            font-size: 30px;
        }
		/*单元格样式*/
        td{
            border: 2px solid black;
            /*单元格中文字到单元格边框的距离*/
            padding: 15px;
            text-align: center;
        }
    </style>
</head>
<body>
    &nbsp;
    <table>
        <caption>个人简历</caption>
        <tbody>
            <tr>
                <td width="10%">学院</td>
                <td colspan="5"></td>
                <td width="15%" rowspan="5">照<br><br>片</td>
            </tr>
            <tr>
                <td>专业</td>
                <td colspan="5"></td>
            </tr>
            <tr>
                <td>姓名</td>
                <td width="10%"></td>
                <td width="10%">性别</td>
                <td width="10%"></td>
                <td width="10%">民族</td>
                <td width="10%"></td>
                
            </tr>
            <tr>
                <td>出生年月</td>
                <td></td>
                <td>籍贯</td>
                <td></td>
                <td>身高</td>
                <td></td>
            </tr>
            <tr>
                <td>学历</td>
                <td></td>
                <td>政治面貌</td>
                <td colspan="3"></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="3"></td>
                <td>联系电话</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td>任职情况</td>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td rowspan="4">本<br><br>人<br><br>简<br><br>历</td>
                <td colspan="2">时间</td>
                <td colspan="2">学校</td>
                <td colspan="2">任职</td>
            </tr>
            <tr>
            	<!--&nbsp代表一个空格，空出来一片空间-->
                <td colspan="2">&nbsp;</td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td rowspan="5">奖<br><br>惩<br><br>情<br><br>况</td>
            </tr>
            <tr>
                <td colspan="6">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="6">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="6">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="6">&nbsp;</td>
            </tr>
        </tbody>
    </table>
</body>
</html>