table css个人简历的实现美观简洁

最新推荐文章于 2024-04-03 23:51:26 发布

橙程橙

最新推荐文章于 2024-04-03 23:51:26 发布

阅读量1.9k

点赞数 2

分类专栏： html+css 文章标签： table 个人简历 html css

本文链接：https://blog.csdn.net/rolinabc/article/details/96432619

版权

html+css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

主要使用table标签来实现个人简历的表格制作

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简介</title>
    <style>
        .title{
            text-align: center;
            font-weight: bold;
            font-size: 22px;
        }
        th{
            font-size: 14px;
            background-color: #f0f0f0;
        }
        td{
            min-width: 80px;
            height: 30px;
        }
    </style>
</head>
<body>
    <table  border="1px" align="center" cellspacing="0" cellpadding="10px">
        <colgroup>
            <col>
        </colgroup>
        <thead>
            <tr>
                <td class="title" colspan="8">个人简介</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>姓名</th>
                <td></td>
                <th>性别</th>
                <td></td>
                <th>出生年月</th>
                <td></td>
                <td colspan="2" rowspan="5" style="width: 160px"></td>
            </tr>
            <tr>
                <th>祖籍</th>
                <td></td>
                <th>民族</th>
                <td></td>
                <th>政治面貌</th>
                <td></td>
            </tr>
            <tr>
                <th>身体状况</th>
                <td></td>
                <th>婚姻状况</th>
                <td></td>
                <th>学历</th>
                <td></td>
            </tr>
            <tr>
                <th>所学专业</th>
                <td colspan="2"></td>
                <th>毕业学校</th>
                <td colspan="2"></td>

            </tr>
            <tr>
                <th>专业能力</th>
                <td colspan="5"></td>
            </tr>
            <tr style="height: 80px;">
                <th>求职意向</th>
                <td colspan="7"></td>
            </tr>
            <tr style="height: 80px;">
                <th>专业课程</th>
                <td colspan="7"></td>
            </tr>
            <tr style="height: 120px;">
                <th>实践经历</th>
                <td colspan="7"></td>
            </tr>
            <tr style="height: 80px;">
                <th>获奖经历</th>
                <td colspan="7"></td>
            </tr>
            <tr style="height: 80px;">
                <th>自我评价</th>
                <td colspan="7"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

橙程橙

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
table css个人简历的实现美观简洁

主要使用table标签来实现个人简历的表格制作效果图如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
复制链接

扫一扫