HTML 制作简单的个人简历

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

啊！大海

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

阅读量5.1k

点赞数 1

分类专栏： HTML+CSS 文章标签： html5

本文链接：https://blog.csdn.net/qq_41025577/article/details/106966654

版权

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在以前学HTML的时候，对于表格的运用只知道td、tr，趁着这个暑假重新学习html进行查缺补漏。

现在我们就先来学学表格的一些简单运用。

第一步：先制作一个简单的6行7列表格。最后一列的宽度设置为200px，再在table里将cellspacing设置为0，cellspacing表示单元格的间隙。
第二步：开始合并单元格，所用到的属性有colspan和rowspan。
colspan表示行合并
rowspan表示列合并
这样合并一下，个人简历表的大致雏形就做好了。

这是最终的效果。

接下来上完整的代码:

  <style>
        td{
            width: 100px;
            text-align: center;
        }
        tr{
            height: 40px;
        }
        .head_img{
            width: 200px;
        }
    </style>
<body>
    <table border="1px" cellspacing="0">
        <tr>
<!--            th标签是td的加粗居中版-->
            <th colspan="7">个人简历</th>
        </tr>
        <tr>
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>年龄</td>
            <td></td>
<!--           rowspan 数列表合并 -->
            <td class="head_img" rowspan="4">照片</td>
        </tr>
        <tr>
            <td>学历</td>
            <td></td>
            <td >籍贯</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>电话</td>
            <td></td>
            <td >政治面貌</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td >毕业院校</td>
            <td colspan="5"></td>
        </tr>
        <tr>
            <td>求职意向</td>
            <td colspan="6"></td>
        </tr>
    </table>
</body>

啊！大海

关注

1
点赞
踩
25

收藏

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

在以前学HTML的时候，对于表格的运用只知道td、tr，趁着这个暑假重新学习html进行查缺补漏。现在我们就先来学学表格的一些简单运用。第一步：先制作一个简单的6行7列表格。最后一列的宽度设置为200px，再在table里将cellspacing设置为0，cellspacing表示单元格的间隙。第二步：开始合并单元格，所用到的属性有colspan和rowspan。colspan表示行合并rowspan表示列合并这样合并一下，个人简历表的大致雏形就做好了。这是最终的效果。接下来上完整
复制链接

扫一扫