主要使用table标签来实现个人简历的表格制作
效果图如下:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>个人简介</title> <style> .title{ text-align: center; font-weight: bold; font-size: 22px; } th{ font-size: 14px; background-color: #f0f0f0; } td{ min-width: 80px; height: 30px; } </style> </head> <body> <table border="1px" align="center" cellspacing="0" cellpadding="10px"> <colgroup> <col> </colgroup> <thead> <tr> <td class="title" colspan="8">个人简介</td> </tr> </thead> <tbody> <tr> <th>姓名</th> <td></td> <th>性别</th> <td></td> <th>出生年月</th> <td></td> <td colspan="2" rowspan="5" style="width: 160px"></td> </tr> <tr> <th>祖籍</th> <td></td> <th>民族</th> <td></td> <th>政治面貌</th> <td></td> </tr> <tr> <th>身体状况</th> <td></td> <th>婚姻状况</th> <td></td> <th>学历</th> <td></td> </tr> <tr> <th>所学专业</th> <td colspan="2"></td> <th>毕业学校</th> <td colspan="2"></td> </tr> <tr> <th>专业能力</th> <td colspan="5"></td> </tr> <tr style="height: 80px;"> <th>求职意向</th> <td colspan="7"></td> </tr> <tr style="height: 80px;"> <th>专业课程</th> <td colspan="7"></td> </tr> <tr style="height: 120px;"> <th>实践经历</th> <td colspan="7"></td> </tr> <tr style="height: 80px;"> <th>获奖经历</th> <td colspan="7"></td> </tr> <tr style="height: 80px;"> <th>自我评价</th> <td colspan="7"></td> </tr> </tbody> </table> </body> </html>