HTML编写个人简历
css样式
table{
width: 50%;
margin: 0 auto;
background-color:grey ;
}
caption{
font-size: 24px;
font-weight: bold;
}
td{
line-height: 40px;
background: white;
text-align: center;
}
.t_title{
width:150px ;
}
.t_color{
background-color: #fafafa;
}
.h_color
{
width: 200px;
background-color: white;
}
使用表格标签 ,合并行列标签完成:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
<link rel="stylesheet" type="text/css" href="css/table.css">
</head>
<body>
<div>
<table >
<caption>个人简介</caption>
<tr>
<td class="t_color t_title">姓名:</td>
<td class="h_color"></td>
<td class="t_color t_title">性别:</td>
<td class="h_color"></td>
<td class="h_color" style="width: 150px" rowspan="5">照片</td>
</tr>
<tr>
<td class="t_color t_title">民族:</td>
<td class="h_color"></td>
<td class="t_color t_title">籍贯:</td>
<td class="h_color"></td>
</tr>
<tr>
<td class="t_color t_title">出生日期:</td>
<td class="h_color"></td>
<td class="t_color t_title">婚姻状况:</td>
<td class="h_color"></td>
</tr>
<tr>
<td class="t_color t_title">学历:</td>
<td class="h_color"></td>
<td class="t_color t_title">体重身高:</td>
<td class="h_color"></td>
</tr>
<tr>
<td class="t_color t_title">专业:</td>
<td class="h_color"></td>
<td class="t_color t_title">健康情况:</td>
<td class="h_color"></td>
</tr>
<tr>
<td class="t_color t_title">毕业院校:</td>
<td class="h_color" colspan="2"></td>
<td class="t_color t_title">邮编:</td>
<td class="h_color"></td>
</tr>
<tr>
<td class="t_color t_title">联系电话:</td>
<td class="h_color" colspan="2"></td>
<td class="t_color t_title">邮编:</td>
<td class="h_color"></td>
</tr>
<tr>
<td class="t_color t_title">兴趣爱好:</td>
<td class="h_color" colspan="4"></td>
<tr>
<td class="t_color t_title">求职意向:</td>
<td class="h_color" colspan="4" style="height: 250px"></td>
</tr>
</tr>
<tr>
<td class="t_color t_title">专业课程:</td>
<td class="h_color" colspan="4" style="height: 100px"></td>
</tr>
<tr>
<td class="t_color t_title">综合实践:</td>
<td class="h_color" colspan="4" style="height: 250px"></td>
</tr>
<tr>
<td class="t_color t_title">自我评价:</td>
<td class="h_color" colspan="4" style="height: 300px"></td>
</tr>
</table>
</div>
</body>
</html>
效果图:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiclRnblN2XjlGcjAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL90zZNJTSq5ENZpXTq50MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL4MzMyQTM0gDM5IzNwAjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)