表格table:
tr(table row)表示行
th(table head)表示表头
td(table data cell)表示单元格
thead,tbody,tfoot的内容与书写位置无关;
下面是一个简单的练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 680px;
text-align: center;
margin-left: 100px;
}
td {
width: 100px;
line-height: 32px;
text-align: center;
border: 1px solid #777777;
}
</style>
</head>
<body>
<div class="wrap">
<h2>个人简历</h2>
<table border="1" cellspacing="0">
<tr>
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>出生年月</td>
<td></td>
<td rowspan="4"></td>
</tr>
<tr>
<td>籍贯</td>
<td></td>
<td>民族</td>
<td></td>
<td>状况</td>
<td></td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>身高</td>
<td></td>
<td>外语程度</td>
<td></td>
</tr>
<tr>
<td>所在学院</td>
<td></td>
<td>学历</td>
<td></td>
<td>健康状态</td>
<td></td>
</tr>
<tr>
<td>所学专业</td>
<td colspan="2"></td>
<td colspan="2">特长</td>
<td colspan="2"></td>
</tr>
<tr>
<td>毕业时间</td>
<td colspan="2"></td>
<td colspan="2">曾任职务</td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="3">家庭住址</td>
<td colspan="2"></td>
<td colspan="2">联系电话</td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">个人微信</td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">E-mail</td>
<td colspan="2"></td>
</tr>
<tr>
<td>主修课程</td>
<td colspan="6"></td>
</tr>
<tr>
<td>获得证书</td>
<td colspan="6"></td>
</tr>
<tr>
<td>熟悉软件</td>
<td colspan="6"></td>
</tr>
<tr>
<td>个人特点</td>
<td colspan="6"></td>
</tr>
<tr>
<td>应聘岗位及个人特长和能力</td>
<td colspan="6"></td>
</tr>
<tr>
<td>社会实践和经历</td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="7">感谢您的信任与我的实力将为我们带来共同的成功!希望我能为咱们公司贡献自己的力量</td>
</tr>
</table>
</div>
</body>
</html>
运行结果如下图