HTML 制作简单的个人简历

编程知识更新时间:2023-04-06 05:52:03

在以前学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>