HTML入门学习day02笔记-优快云博客

HTML入门学习day02笔记

我们使用的编辑软件是sublime。

1、课程表

今天学习了用html中的制作如下图的所示的表格 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">课&nbsp;程&nbsp;表</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、个人简历

在课堂上我们练习了制作课程表，作业是完成以下样式的个人简历：

html初学者个人简历
作业实现代码附下：

<!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>

代码实现的最终效果： html初学者个人简历