HTML5制作个人简历模板

vscode2019使用HTML制作一个简单的个人简历模板

嘧

8193人浏览 · 2022-07-18 18:43:17

嘧 · 2022-07-18 18:43:17 发布

利用表格标签制作一个个人简历的模板，代码片段如下：

<body>
    <table bgcolor="black" cellspacing="1" width="700px" heihgt="900px" align="center">
        <caption>个人简历</caption>
        <tr bgcolor="white" height="45">
            <th>姓名</th>
            <td colspan="2"></td>
            <th>性别</th>
            <td></td>
            <th>出生年月</th>
            <td colspan="2"></td>
            <td colspan="2" rowspan="3"></td>
        </tr>
        <tr bgcolor="white" height="45">
            <th>籍贯</th>
            <td colspan="2"></td>
            <th>民族</th>
            <td></td>
            <th>计算机水平</th>
            <td colspan="2"></td>
        </tr>
        <tr bgcolor="white" height="45">
            <th>政治面貌</th>
            <td colspan="2"></td>
            <th>身高</th>
            <td></td>
            <th>月薪要求</th>
            <td colspan="2"></td>
        </tr>
        <tr bgcolor="white" height="45">
            <th>所学专业</th>
            <td colspan="2"></td>
            <th>学历</th>
            <td></td>
            <th>求职类型</th>
            <td colspan="4"></td>
        </tr>
        <tr bgcolor="white" height="45">
            <th>家庭住址</th>
            <td colspan="3"></td>
            <th colspan="2">兴趣特长</th>
            <td  colspan="4"></td>
        </tr>
        <tr bgcolor="white" height="45">
            <th rowspan="2">现居地址</th>
            <td colspan="3" rowspan="2"></td>
            <th colspan="2">联系电话</th>
            <td  colspan="4"></td>
        </tr>
        <tr bgcolor="white" height="45">
            <th colspan="2">QQ号</th>
            <td colspan="4"></td>
        </tr>
        <tr bgcolor="white" height="45">
            <th rowspan="7">教育背景</th>
            <td colspan="9" rowspan="2"></td>
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
        <tr bgcolor="white" height="45">
            <td colspan="9" rowspan="3"></td>
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
        <tr bgcolor="white" height="45">
            <td colspan="9" rowspan="2"></td>
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
        <tr bgcolor="white" height="45">
            <th rowspan="5">个人能力及专长</th>
            <td rowspan="5" colspan="9"></td>
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
        <tr bgcolor="white" height="45">
            <th rowspan="4">工作经验</th>
            <td rowspan="4" colspan="9"></td>
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
        <tr bgcolor="white" height="45">
        </tr>
    </table>
</body>

在浏览器中显示效果如图：

总结：表格标签作用是用来给一堆数据添加表格语义，使数据表现形式更加直观和清晰。其中表格标签中的table代表整个表格, 也就是一对table标签就是一个表格，一对tr标签就是表格中的一行，一对td标签就是一行中的一个单元格。除td外，有时也会用到th标签，th标签内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。caption标签的作用为指定表格的标题。

align设置水平对齐，valign设置垂直对齐。水平对齐可以给table标签和tr标签和td标签使用，垂直对齐只能给tr标签和td标签使用。需要注意的是，当td和 tr中都设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐。设置表格边框时，通过指定外边距为0来实现细线表格是不靠谱的要想制作一个细线表格可以给table标签设置bgcolor="black"，cellspacing = "1px" ，给tr标签设置bgcolor ="white"。cellspacing外边距属性，用来设置单元格与单元格之间的距离；cellpadding内边距，用来设置单元格的边框与单元格中文字之间的距离。

关于单元格合并的问题，水平上的单元格合并，给td标签添加一个colspan属性，eg: