作业一：完成用户注册页面
页面源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册页面</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<table border="1px" align="center">
<tr>
<th colspan="2"><b>用户注册页面</b></th>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="user" value="" placeholder="用户名"/>
</td>
<tr>
<td>密码：</td>
<td>
<input type="password" name="passwd" value="" placeholder="密码"/>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<label><input type="radio" name="sex" value="男">男</label>
<label><input type="radio" name="sex" value="女">女</label>
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input id="a1" type="checkbox" name="love1" value="唱歌" checked="checked"/>
<label for="a1">唱歌</label>
<input id="b1" type="checkbox" name="love2" value="写作"/>
<label for="b1">写作</label>
<input id="c1" type="checkbox" name="love3" value="绘画"/>
<label for="c1">绘画</label>
</td>
<tr>
<td>职业：</td>
<td>
<select name="nation">
<option value="1" selected>学生</option>
<option value="2">上班族</option>
<option value="3">自由职业者</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
效果：
作业二：完成电子汇款单
页面源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子汇款单页面</title>
</head>
<body>
<h1>工商银行电子汇款单</h1>
<table border="1px" width="800px">
<tr>
<td colspan="2"><b>回单类型</b></td>
<!-- <td>文本</td> -->
<td>网上转账汇款</td>
<td colspan="2"><b>指令序列</b></td>
<!-- <td>文本</td> -->
<td>HQH0000000000000000013878172</td>
</tr>
<tr>
<td rowspan="4" style="text-align: center"><b>付<br>款<br>人</b></td>
<td>用户</td>
<td>老牟</td>
<td rowspan="4" style="text-align: center"><b>收<br>款<br>人</b></td>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<!-- <td>文本</td> -->
<td><b>卡号</b></td>
<td>000000000000001</td>
<!-- <td>文本</td> -->
<td><b>卡号</b></td>
<td>000000000000002</td>
</tr>
<tr>
<!-- <td>文本</td> -->
<td>地区</td>
<td>南京</td>
<!-- <td>文本</td> -->
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<!-- <td>文本</td> -->
<td><b>网点</b></td>
<td>工商江苏南京业务处理中心</td>
<!-- <td>文本</td> -->
<td><b>网点</b></td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<!-- <td>文本</td> -->
<td>人民币</td>
<td colspan="2"><b>钞汇标志</b></td>
<!-- <td>文本</td> -->
<td><u>钞票</u></td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<!-- <td>文本</td> -->
<td >1.00元</td>
<td colspan="2"><b>手续费</b></td>
<!-- <td>文本</td> -->
<td >0.57元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<!-- <td>文本</td> -->
<td colspan="4">人民币（大写）：壹圆整</td>
<!-- <td></td> -->
<!-- <td ></td> -->
<!-- <td>文本</td> -->
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td><i>2017年6月1日</i></td>
<!-- <td>文本</td> -->
<td colspan="2"><b>时间戳</b></td>
<td><i>2017-06-01-13.00.00. 00000</i></td>
<!-- <td>文本</td> -->
</tr>
</table>
<p>票据打印时间：2017-06-01 15:00:12</p>
<p><s>票据打印单位：江苏徐州业务中心</s></p>
<p>操作员：大曾</p>
</body>
</html>
效果：
作业三：古诗词
页面源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>古诗词页面</title>
</head>
<body>
<h2>将进酒 君不见黄河之水天上来</h2>
<table>
<tr>
<td><img src="images/李白.png" width="250px" height="450px" align="center"></td>
<td>
<pre>
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马、千金裘，
呼儿将出换美酒，与尔同销万古愁。
</pre>
</td>
</tr>
</table>
</body>
</html>
效果：
作业四：豆瓣电影
页面源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>豆瓣电影</title>
</head>
<body>
<h2>热门电影板块</h2>
<hr>
<table width="1250px">
<tr>
<td><b>最近热门电影</b></td>
<td>热门</td>
<td>最新</td>
<td>豆瓣高分</td>
<td>冷门佳作</td>
<td>华语</td>
<td>华语</td>
<td>欧美</td>
<td>韩国</td>
<td>日本</td>
<td>更多>></td>
</tr>
</table>
<hr>
<table width="1250px" >
<tr>
<td>
<table width="200px" height="250px" align="center">
<tr>
<td><img src="images/周处除三害.png" width="180px" height="240px" align="center"></td>
</tr>
<tr>
<td>周处除三害</td>
</tr>
</table>
</td>
<td>
<table width="200px" height="250px" align="center">
<tr>
<td><img src="images/腐花之女.png" width="180px" height="240px" align="center"></td>
</tr>
<tr>
<td>腐花之女</td>
</tr>
</table>
</td>
<td>
<table width="200px" height="250px" align="center">
<tr>
<td><img src="images/弗洛伊德的最后一会.png" width="180px" height="240px" align="center"></td>
</tr>
<tr>
<td>弗洛伊德的最后一会</td>
</tr>
</table>
</td>
<td>
<table width="200px" height="250px" align="center">
<tr>
<td><img src="images/陌路狂刀.png" width="180px" height="240px" align="center"></td>
</tr>
<tr>
<td>陌路狂刀</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="200px" height="250px" align="center">
<tr>
<td><img src="images/机器人之梦.png" width="180px" height="240px" align="center"></td>
</tr>
<tr>
<td>机器人之梦</td>
</tr>
</table>
</td>
<td>
<table width="200px" height="250px" align="center">
<tr>
<td><img src="images/首尔之春.png" width="180px" height="240px" align="center"></td>
</tr>
<tr>
<td>首尔之春</td>
</tr>
</table>
</td>
<td>
<table width="200px" height="250px" align="center">
<tr>
<td><img src="images/美国小说.png" width="180px" height="240px" align="center"></td>
</tr>
<tr>
<td>美国小说</td>
</tr>
</table>
</td>
<td>
<table width="200px" height="250px" align="center">
<tr>
<td><img src="images/阿盖尔：神秘特工.png" width="180px" height="240px" align="center"></td>
</tr>
<tr>
<td>阿盖尔：神秘特工</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
效果：
总结：页面布局可以通过表格table来完成。
