案例网站首页
确定使用table来完成布局
如果某一行只有一个单元格则使用<tr><td><td/><tr/>
如果某一行有多个单元格则使用
<tr>
<td>
<table><table/>
<td/>
<tr>
实现HTML_旅游网站首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table width="100%" align="center"> <tr> <td> <img src="images/top_banner.jpg" width="100%" alt=""> </td> </tr> <tr> <td> <table width="100%" align="center"> <tr> <td> <img src="images/logo.jpg" alt=""> </td> <td> <img src="images/search.png" alt=""> </td> <td> <img src="images/hotel_tel.png" alt=""> </td> </tr> </table> </td> </tr> <tr> <td> <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> </tr> </table> </td> </tr> <tr> <td> <img src="images/banner_3.jpg" alt="" width="100%"> </td> </tr> <tr> <td> <img src="images/icon_5.jpg" alt=""> 黑马精选 <hr color="#ffd700"> </td> </tr> <tr> <td> <table align="center" width="95%"> <tr> <td> <img src="images/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="images/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="images/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="images/jiangxuan_1.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> </tr> </table> </td> </tr> <tr> <td> <img src="images/icon_6.jpg" alt=""> 黑马精选 <hr color="#ffd700"> </td> </tr> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2"> <img src="images/guonei_1.jpg" alt=""> </td> <td> <img src="images/jiangxuan_2.jpg" alt="" height="100%"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="images/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="images/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="images/jiangxuan_2.jpg" alt="" height="100%"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="images/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="images/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <tr> <td> <img src="images/icon_7.jpg" alt=""> 境外游 <hr color="#ffd700"> </td> </tr> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2"> <img src="images/jiangwai_1.jpg" alt=""> </td> <td> <img src="images/jiangxuan_3.jpg" alt="" height="100%"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="images/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="images/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="images/jiangxuan_3.jpg" alt="" height="100%"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="images/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="images/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <tr> <td> <img src="images/footer_service.png" alt="" width="100%"> </td> </tr> <tr> <td align="center" bgcolor="#ffd700" height="40"> <font color="gray" size="2"> 江苏传智播客教育科技股份有限公司版权所有 Copyright 2006-2018©,All Rights Reserved苏I CP备16007882 </font> <img src=""> </td> </tr> </table> </body> </html>
结果：
实现HTML_旅游网站首页
