分析:
确定使用table来完成布局
如果某一行只要一个单元格,则使用<tr><td></td></tr>
如果某一行有多个单元格,则使用
<tr> <td> <table></table> </td> </tr>
实现旅游网站案例
<!-- 采用table来完成布局--> <!-- 最外层的table,用于整个页面的布局--> <!-- 宽度:100,居中--> <table width="100%" align="center"> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!-- 图片,宽度:100--> <img src="image/top_banner.jpg" width="100%"> </td> </tr> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!-- 宽度:100,居中--> <table width="100%" align="center"> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!-- 图片--> <img src="image/logo.jpg"> </td> <td> <!-- 表头单元格--> <!-- 图片--> <img src="image/search.png"> </td> <td> <!-- 表头单元格--> <!-- 图片--> <img src="image/hotel_tel.png"> </td> </tr> </table> </td> </tr> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!-- 宽度:100,居中--> <table width="100%" align="center"> <tr bgcolor="#ffd700" align="center" height="45"> <!-- 定义行,背景色,居中,高度: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> </td> </tr> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!-- 图片,高度:100--> <img src="image/banner_3.jpg" width="100%"> </td> </tr> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!-- 图片--> <img src="image/icon_5.jpg"> 大余精选 <!-- 横线,颜色--> <hr color="#ffd700"> </td> </tr> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!-- 居中,宽度:100--> <table align="center" width="95%"> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_1.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 899</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_1.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 899</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_1.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 899</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_1.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 899</font> </td> </tr> </table> </td> </tr> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/icon_6.jpg"> 国内游 <hr color="#ffd700"> </td> </tr> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!-- 居中宽度:100--> <table align="center" width="95%"> <tr> <!-- 定义行--> <td rowspan="2"><!-- 合并列--> <!--图片 --> <img src="image/guonei_1.jpgei_1.jpg"> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_2.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_2.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_2.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> </tr> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_2.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_2.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_2.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <tr> <!-- 定义行--> <td> <img src="image/icon_7.jpg"> 境外游 <hr color="#ffd700"> </td> </tr> <tr> <!-- 定义行--> <td> <table align="center" width="95%"> <tr> <!-- 定义行--> <td rowspan="2"><!-- 合并列--> <!--图片 --> <img src="image/jiangwai_1.jpg"> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_3.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_3.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_3.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> </tr> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_3.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_3.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> <td> <!-- 表头单元格--> <!--图片 --> <img src="image/jiangxuan_3.jpg"> <!--文字--> <p>外星球三天体验卡</p> <!-- 字体--> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <tr> <!-- 定义行--> <td> <!-- 表头单元格--> <!-- 图片,宽度:100 --> <img src="image/footer_service.png" width="100%"> </td> </tr> <tr> <!-- 定义行--> <!-- 居中,黄色。高度:40--> <td align="center" bgcolor="yellow" height="40"> <!-- 灰色,2字体--> <font color="gray" size="2"> 江苏传智播客教育科技股份有限公司<br> 版权所有Copyright 2006-2018©@, All Rights Reserved 苏ICP备16007882 </font> </td> </tr> </table>
原文地址:http://www.cnblogs.com/yuzong/p/16810051.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性