Day21--课后作业（html表格）
2018-10-29 本文已影响0人
zxhlcl
最傻逼的解决办法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>个人简历</title>
</head>
<body>
<p align="center"><font size="15" color="black" face="黑体" >个人简历</font></p>
<table align="center" bgcolor="black" height="2100" border="1">
<tr bgcolor="white" align="center" height="100">
<td width="300"><font size="10" color="black" face="仿宋">学院</font></td>
<td colspan="5"><a href="http://www.uva.nl/home" target="_blank"><font size="10" color="black" face="仿宋">阿姆斯特丹大学</font></a></td>
<td rowspan="5" width="600"><img src="img/python创始人.png" ></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td><font size="10" color="black" face="仿宋">专业</font></td>
<td colspan="5"><font size="10" color="black" face="仿宋">数学和计算机科学</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td width="300"><font size="10" color="black" face="仿宋">姓名</font></td>
<td width="300"><font size="6" color="black" face="仿宋">Guido van Rossum</font></td>
<td width="300"><font size="10" color="black" face="仿宋">性别</font></td>
<td width="300"><font size="10" color="black" face="仿宋">男</font></td>
<td width="300"><font size="10" color="black" face="仿宋">民族</font></td>
<td width="300"><font size="10" color="black" face="仿宋">犹太</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td><font size="10" color="black" face="仿宋">出生年月</font></td>
<td><font size="6" color="black" face="仿宋">1956年1月31日 </font></td>
<td><font size="6" color="black" face="仿宋">籍贯 </font></td>
<td><font size="6" color="black" face="仿宋">荷兰·阿姆斯特丹 </font></td>
<td><font size="12" color="black" face="仿宋">身高 </font></td></td>
<td><font size="12" color="black" face="times new roman">172cm </font></td></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td><font size="12" color="black" face="仿宋">学历</font></td>
<td><font size="12" color="black" face="仿宋">博士</font></td>
<td><font size="12" color="black" face="仿宋">政治面貌</font></td>
<td colspan="3"><font size="12" color="black" face="仿宋">无党派人士</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td><font size="12" color="black" face="仿宋">就业意向</font></td>
<td colspan="6" align="left"><font size="12" color="black" face="仿宋">我创建的Python这门语言，我TMD还需要就业吗？？</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td><font size="12" color="black" face="仿宋">兴趣爱好</font></td>
<td colspan="6" align="left"><font size="12" color="black" face="仿宋">抽烟、喝酒、烫头</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td><font size="12" color="black" face="仿宋">个人说明</font></td>
<td colspan="6" align="left"><font size="12" color="black" face="仿宋">我就是我自己的神，活在我的地方</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td><font size="12" color="black" face="仿宋">家庭地址</font></td>
<td colspan="6" align="left"><font size="12" color="black" face="仿宋">华盛顿北弗吉尼亚的郊区</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td><font size="12" color="black" face="仿宋">住址详情</font></td>
<td ><font size="12" color="black" face="仿宋">保密</font></td>
<td ><font size="12" color="black" face="仿宋">联系电话</font></td>
<td ><font size="12" color="black" face="仿宋">保密</font></td>
<td ><font size="12" color="black" face="仿宋">手机</font></td>
<td colspan="2"><font size="12" color="black" face="仿宋">保密</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td><font size="12" color="black" face="仿宋">任职情况</font></td>
<td colspan="6" align="left"><font size="12" color="black" face="仿宋">待业在家，专攻代码.....</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td rowspan="12"><font size="12" color="black" face="仿宋">个人履历</font></td>
<td colspan="2"><font size="12" color="black" face="仿宋">时间</font></td>
<td colspan="2"><font size="12" color="black" face="仿宋">学校</font></td>
<td colspan="2"><font size="12" color="black" face="仿宋">任职</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="2"><font size="12" color="black" face="仿宋">1982年</font></td>
<td colspan="2"> <font size="12" color="black" face="仿宋">阿姆斯特丹大学</font></td>
<td colspan="2"><font size="12" color="black" face="仿宋">攻读博士</font> </td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="2"> <font size="12" color="black" face="仿宋">1989年</font></td>
<td colspan="2"> <font size="12" color="black" face="仿宋">阿姆斯特丹大学</font></td>
<td colspan="2"><font size="12" color="black" face="仿宋">创立Python语言</font> </td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="2"> <font size="12" color="black" face="仿宋">2005年</font></td>
<td colspan="2"><font size="12" color="black" face="仿宋">谷歌公司</font> </td>
<td colspan="2"> <font size="12" color="black" face="仿宋">工程师</font></td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="6"> </td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="6"> </td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="6"> </td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="6"> </td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="6"> </td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="6"> </td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="6"> </td>
</tr>
</table>
</body>
</html>
效果：
QQ截图20181029194705.png
采用CSS设置网页得到模式，解决办法如下：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html{height:100%;}
span
{
margin-top:10px;
font-family: "黑体";
font-size: 30px;
}
.div01
{
text-align:center;
margin: 10px 10px;
}
.table01
{
border-collapse: collapse;
font-family: "仿宋";
font-size: 20px;
margin: auto;
}
.table01 td
{
height: 50px;
width: 150px;
border: 1px solid black;
}
.table02
{
border-collapse: collapse;
border-width:0px;
border-style:hidden;
}
.table02 td
{
width:250px
}
.table03
{
border-collapse: collapse;
border-width:0px;
border-style:hidden;
}
.table03 td
{
width:400px
}
</style>
<title></title>
</head>
<body>
<div class="div01">
<span>个人简历</span>
<table class="table01">
<tr>
<td></td>
<td colspan="5"></td>
<td rowspan="5" style="width:200px">照片</td>
</tr>
<tr>
<td></td>
<td colspan="5"></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="5">
<table class="table02">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</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">
<table class="table02">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</table>
</td>
</tr>
<tr>
<td></td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="10"></td>
<td colspan="6">
<table class="table03" >
<td></td>
<td></td>
<td></td>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="table03" >
<td></td>
<td></td>
<td></td>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="table03" >
<td></td>
<td></td>
<td></td>
</table>
</td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
</table>
</div>
</body>
</html>!
效果如下所示：
QQ截图20181031102559.png
