分析:

  确定使用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">&yen; 899</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_1.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 899</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_1.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 899</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_1.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 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">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>

                    <tr> <!-- 定义行-->
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->

                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 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">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>

                    <tr> <!-- 定义行-->
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 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&copy@, 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. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性