HTML 第八章 Table局部格局与浏览器兼容性
日期：2014-05-17 浏览次数：20880 次
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>
<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>
<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>
<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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
