日期:2014-05-17  浏览次数:20638 次

HTML 第八章 Table局部布局与浏览器兼容性


HTML 第七章 CSS + DIV实现局部布局

HTML 第八章 Table局部布局与浏览器兼容性


注意:案例中所涉及的图片素材,页面下方提供下载

1、技术目标:

  • 掌握使用table tr td局部布局的情况
  • 处理浏览器兼容性问题


2、Table局部布局应用场景1

??? 2.1) 应用场景1(产品列表页面),如图:

???

???
??? 2.2) 布局分析:类似产品列表页面这种多行多列的数据展示方式,
??? 一般使用表格布局来处理,HTML结构代码 如下:
???

<body>
    <div id="container">
     <table id="main">
        <tr class="title">
          <td class="td_1"><input type="checkbox" value="全选"  /> 全选</td>
          <td class="td_2">商品图片</td>
          <td class="td_3">商品名称/出售者/联系方式</td>
          <td class="td_4">价格</td>
        </tr>
        <tr class="a_c">
          <td><input type="checkbox" value="1" name="auction_id" /></td>
          <td><a href="#" title="商品详细情况"><img src="images/list0.jpg" alt="alt" /></a></td>
          <td><a  href="#">杜比环绕,家庭影院必备,超真实享受</a><br />
              出售者:<a href="#">ling112233</a> <br />
              <a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;
              <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>   
          </td>
          <td>一口价<br /> 2833.0</td>
        </tr>
        <tr class="a_c">
          <td><input type="checkbox" value="2" name="auction_id" /></td>
          <td><a href="#" title="商品详细情况">
                         <img src="images/list1.jpg" alt="alt" /></a></td>
          <td><a  href="#">NVDIA 9999GT 512MB 256bit极品显卡,不容错过</a>
              <br />出售者:<a href="#">aipiaopiao110</a>
              <br /><a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;
          <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>
              </td>
          <td>一口价<br />2460.0</td>
        </tr>
        <tr class="a_c">
          <td><input type="checkbox" value="3" name="auction_id" /></td>
          <td><a href="#" title="商品详细情况">
                <img src="images/list2.jpg" alt="alt" /></a></td>
          <td><a  href="#">精品热卖:高清晰,30寸等离子电视</a>
             <br />出售者:<a href="#">阳光的挣扎</a>
             <br /> <a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;
            <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>
             </td>
          <td>一口价<br />18880</td>
        </tr>
       
        <tr class="a_c">
          <td><input type="checkbox" value="4" name="auction_id" /></td>
          <td> <a href="#" title="商品详细情况">
              <img src="images/list3.jpg" alt="alt" /></a