使用HTML写一个简历表格

代码实现的效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>填写个人简历</title>
</head>
<body>
    <table border="1" align="center" width="1050" height="800" bordercolor="black">
        <caption>
            <h1>个人简历</h1>
        </caption>
        <tr>
            <td align="center" width="150">姓名</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">性别</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">出生年月</td>
            <td align="center" width="150"></td>
            <td rowspan="3" align="center">照片</td>
        </tr>
        <tr>
            <td align="center" width="150">省份证号码</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">民族</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">政治面貌</td>
            <td align="center" width="150"></td>
        </tr>
        <tr>
            <td align="center" width="150">婚姻状况</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">健康状况</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">身高</td>
            <td align="center" width="150"></td>
        </tr>
        <tr>
            <td align="center" width="150">现户口所在地</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">所学专业</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">学历</td>
            <td align="center" width="150" colspan="2"></td>
        </tr>
        <tr>
            <td align="center" width="150">最后毕业学校</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">毕业时间</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">技术职称</td>
            <td align="center" width="150" colspan="2"></td>
        </tr>
        <tr>
            <td align="center" width="150">现工作单位</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">参加工作时间</td>
            <td align="center" width="150"></td>
            <td align="center" width="150">现从事专业</td>
            <td align="center" width="150" colspan="2"></td>
        </tr>
        <tr>
            <td align="center" rowspan="6">主要简历</td>
            <td align="center" colspan="2">起止年月</td>
            <td align="center" colspan="2">在何单位</td>
            <td align="center" colspan="2">任何职务</td>
        </tr>
        <tr>
            <td align="center" colspan="2" style="height: 35px;"></td>
            <td align="center" colspan="2"></td>
            <td align="center" colspan="2"></td>
        </tr>
        <tr>
            <td align="center" colspan="2" style="height: 35px;"></td>
            <td align="center" colspan="2"></td>
            <td align="center" colspan="2"></td>
        </tr>
        <tr>
            <td align="center" colspan="2" style="height: 35px;"></td>
            <td align="center" colspan="2"></td>
            <td align="center" colspan="2"></td>
        </tr>
        <tr>
            <td align="center" colspan="2" style="height: 35px;"></td>
            <td align="center" colspan="2"></td>
            <td align="center" colspan="2"></td>
        </tr>
        <tr>
            <td align="center" colspan="2" style="height: 35px;"></td>
            <td align="center" colspan="2"></td>
            <td align="center" colspan="2"></td>
        </tr>
        <tr>
            <td align="center">业务专长及工作成果</td>
            <td align="center" colspan="6" width="150" height="150"></td>
        </tr>
        <tr>
            <td align="center">通讯地址</td>
            <td align="center" colspan="2"></td>
            <td align="center">邮政编码</td>
            <td align="center" colspan="3"></td>
        </tr>
        <tr>
            <td align="center">联系电话</td>
            <td align="center" colspan="2"></td>
            <td align="center">Email地址</td>
            <td align="center" colspan="3"></td>
        </tr>
    </table>
</body>
</html>

在写代码之前，先了解一下html的表格标签，表格标签的格式如下：

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>身高</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>19</td>
    <td>1.78</td>
  </tr>
</table>

效果如下

可以看到，效果并不明显，那么在table标签里加一个border=“1”的属性，为表格加上边框

可以从上面的格式代码中看出，先是有个table标签包裹住了几个tr标签，然后tr标签又包裹住了几个td标签

table代表整个表格, 也就是一对table标签就是一个表格

tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行

td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格

需要注意的是，除td外，有时也会用到th，th内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。

可以形象的理解为，表格是先由一个个单元格拼凑成一行，然后再把每一行都拼成一个大的表格

表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框

表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现

在默认情况下，表格的宽与高由内容来撑起，也可以通过对其style的width以及height属性设置来调整宽高

举个例子：

这里我为第一行（即第一个tr）加了一个height:200px 设置了第一行高度为200px 并且为第一行第一列和第一行第二列的单元格设置了width：200px 效果如下

可以看到第一行所有的单元格的高度都为200px 而第一列第二列的宽度都是200px 这可以通过增加单元格来更直观的显示

需要注意，当某行的td标签不足不能占位占满时就会出现上面这种单元格空缺的情况，这种情况可以通过增加单元格或者给单元格的宽度设置得大一点来解决

要完成个人简历的制作，还需要知道两个属性 rowspan （行合并）和 colspan （列合并）

在某个单元格内加入rowspan = “2”可以使该单元格把下一行的位置也占据，下面举个例子

当给第一行第一列单元格增加了rowspan = "2"，第三行第一列单元格增加了colspan=“2”的属性后

可以看到，第一行第一列的单元格占据了下方第二行单元格的位置，然后第三行第一列的单元格占据了第三行第二列的单元格的位置并且它们会使本来表格的位置挤出之前的大小，可以看到现在的表格比之前多了一行而且第二行和第四行多出了一列。内容为“姓名”的单元格挤占了第二行第一列的位置，使得第二行整体向右移了一个单元格的位置。

掌握了这些知识后就可以去使用html的table tr td 等标签来制作个人简历了。

更多推荐

使用HTML写一个简历表格