HTML入门学习day02笔记
我们使用的编辑软件是sublime。
1、课程表
今天学习了用html中的制作如下图的所示的表格
因为是初学,不会用css和js,所以做的比较简单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.con {
text-align: center;
}
.con-tab {
margin: 0 auto;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" class="con-tab">
<caption ><font size="6">课 程 表</caption><br><br>
<thead>
<tr>
<th colspan="2"></th>
<th width="100" height="40">星期一</th>
<th width="100">星期二</th>
<th width="100">星期三</th>
<th width="100">星期四</th>
<th width="100">星期五</th>
<th width="100">星期六</th>
<th width="100">星期日</th>
</tr>
</thead>
<tbody>
<tr class="con">
<td rowspan="2" width="100" >上午</td>
<td height="40">9:00-10:30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="40">11:00-11:30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="con">
<td colspan="9" height="40">中午(11:30-14:00)</td>
</tr>
<tr class="con">
<td rowspan="2" width="100" >下午</td>
<td height="40">14:00-16:30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="40">17:00-17:30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="con">
<td colspan="9" height="40">休息</td>
</tr>
<tr class="con">
<td height="40" width="100" >晚上</td>
<td>19:30-21:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
代码实现的最终效果:
2、个人简历
在课堂上我们练习了制作课程表,作业是完成以下样式的个人简历:
作业实现代码附下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
<style>
.con {
text-align: center;
}
.left {
vertical-align: middle;
text-indent: 2em;
}
</style>
</head>
<body>
<center>
<font size="4">
<table border="1" cellspacing="0">
<thead>
<tr>
<td height="40" colspan="4" class="con"><strong>个人简历</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td height="40" colspan="4" class="con">基本信息</td>
</tr>
<tr>
<td height="40" class="con">姓名</td>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr >
<td height="40" class="con">毕业院校</td>
<td colspan="2"></td>
</tr>
<tr>
<td height="40" class="con">性别</td>
<td width="150" class="con"></td>
<td width="150" class="con">生日</td>
<td width="150" class="con"></td>
</tr>
<tr>
<td height="40" class="con">学历</td>
<td></td>
<td class="con">专业</td>
<td ></td>
</tr>
<tr>
<td width="150" class="con">外语水平</td>
<td height="40"></td>
<td class="con">联系方式</td>
<td></td>
</tr>
<tr>
<td height="40" class="con">籍贯</td>
<td colspan="3"></td>
</tr>
<tr>
<td height="40" colspan="4" class="left">职业技能<br>1.<br>2.<br><br><br><br><br><br><br><br></td>
</tr>
<tr>
<td height="40" colspan="4" class="left">项目经验</td>
</tr>
<tr>
<td height="40" colspan="2" class="con">智慧校园选课系统</td>
<td colspan="2" class="con">2019年1月~2019年6月</td>
</tr>
<tr>
<td height="40" colspan="4" class="left">项目描述:<br><br><br><br><br></td>
</tr>
<tr>
<td height="40" class="con">预览地址</td>
<td colspan="3"></td>
</tr>
<tr>
<td height="40" class="con">github</td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</font>
</center>
</body>
</html>
代码实现的最终效果: