案例:旅游网站首页
1.确定使用table来完成布局
2.如果某一行只有一个单元格,则使用
3.如果某一行有多个单元格
<tr>
<td>
<table> </table>
</td>
</tr>
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游网</title>
</head>
<body>
<!--采用table来完成布局-->
<!--最外层的table,用于整个页面的布局-->
<table width="100%" align="center">
<!-- 第1行 -->
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<!--第2行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="image/logo.jpg" alt="">
</td>
<td>
<img src="image/search.png" alt="">
</td>
<td>
<img src="image/hotel_tel.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<!-- 第3行-->
<tr>
<table width="100%" align="center">
<tr bgcolor="#ffd700" align="center" height ="45" >
<td>
<a href=""> 首页 </a>
</td>
<td>
门票
</td>
<td>
酒店
</td>
<td>
香港车票
</td>
<td>
出境游
</td>
<td>
国内游
</td>
<td>
港澳游
</td>
<td>
抱团定制
</td>
<td>
全球自由行
</td>
<td>
收藏排行榜
</td>
</tr>
</table>
</tr>
<!-- 第4行 轮播图-->
<tr>
<td>
<img src="image/banner_3.jpg" alt="" width="100%">
</td>
</tr>
<!-- 第5行 老王精选-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="" >
老王精选
<hr color="#ffd700">
</td>
</tr>
<!-- 第6行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第7行 国内游-->
<tr>
<td>
<img src="image/icon_6.jpg" alt="" >
国内游
<hr color="#ffd700">
</td>
</tr>
<!-- 第8行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第9行 境外游-->
<tr>
<td>
<img src="image/icon_7.jpg" alt="" >
境外游
<hr color="#ffd700">
</td>
</tr>
<!-- 第10行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第11行 -->
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
</td>
</tr>
<!-- 第12行 -->
<tr >
<table width="100%">
<td>
<tr bgcolor="#ffd700" align="center" height="45">
<td>
<font color="gray" size="2">
四川未央老王教育科技股份有限公司
版权所有Copyright 2006-2018©, All Rights Reserved 川ICP备16007882
</font>
</td>
</tr>
</td>
</table>
</tr>
</table>
</body>
</html>
网页显示: