網頁排版的時候不要忘了table標籤

時間 2019-11-09

標籤網頁排版時候不要忘了 table 標籤欄目 HTML 简体版

原文原文鏈接

【概況】

DIV+CSS是WEB設計標準，它是一種網頁的佈局方法。與傳統中經過表格（table）佈局定位的方式不一樣，它能夠實現網頁頁面內容與表現相分離。但有時候在佈局的時候，純粹的用div感受嵌套的太深，若是換成table來佈局，雖然說標籤會多點，但結構會更加清晰。

【例子】

好比我要實現一個下面的用於博客上的文章列表，以下圖：

1、用div方法，代碼以下：

 1 <style type ="text/css">
 2     .item{width :710px ;padding-left :60px ;background :url("Images/default.jpg") no-repeat left top ;}
 3     .item.intro{width :710px ;}
 4 </style >
 5 <div class="item">
 6     <div class ="intro">
 7         <p>
 8             <a href="#">怎麼解決ASP.NET下載時的中文文件名亂碼 ?</a></ p>
 9         <p class="f12 color6">
10             負載量不大的狀況下select、delete和update是響應很迅速的，最多加幾個索引就能夠搞定，但千萬級的註冊用戶和一個設計很差的多對多關係將帶來很是嚴重的性能問題。另外在高的狀況下，更新一個...
11         </p>
12         <p class="f12 color6">
13             <a href="#">黑樹 </a> / <a href ="#">Javascript</ a> / 3人回答 / 2人關注 / 18人瀏覽
14         </p>
15          <p class="f12 color6 fr" >
16             1小時前
17         </p>
18     </div >
19 </div>

用這種方法是將圖片做爲總體div的左上角背景，而後設置padding-left，這樣就要右邊就要固定寬度，還有最下面的時間塊浮動會有問題，如圖：css

2、用dl方法，代碼以下：

 1 <style type="text/css">
 2     .item dt{ width:60px ;float :left ;}
 3 </style>
 4 <dl class="item">
 5     <dt ><img width="48" height="48" alt="" src="Images/default.jpg" /></dt>
 6     <dd >
 7         <p>
 8             < a href ="#">怎麼解決ASP.NET下載時的中文文件名亂碼 ?</ a></ p>
 9         <p class="f12 color6">
10             負載量不大的狀況下select、delete和update是響應很迅速的，最多加幾個索引就能夠搞定，但千萬級的註冊用戶和一個設計很差的多對多關係將帶來很是嚴重的性能問題。另外在高的狀況下，更新一個...
11         </p>
12         <p class="f12 color6">
13             < a href ="#">黑樹 </ a> / <a href ="#"> Javascript</ a> / 3人回答 / 2人關注 / 18人瀏覽
14         </p>
15     </dd >
16 </dl>

用這種方法將dt向左浮動，不過其浮動會影響右邊的內容，不過想辦法也能將其解決，如圖：

3、用table方法，代碼以下：

 1 <table border="0" cellspacing="10" cellpadding="0" width="100%" class="mb20">
 2     <tr >
 3         <td class="w60" valign="top">
 4             <a href="#">
 5                 <img width="48" height="48" alt="" src="Images/default.jpg" />
 6             </a>
 7         </td>
 8         <td>
 9             <table border="0" cellspacing="10" width="100%">
10                 <tr>
11                     <td colspan="2">
12                         <a href="#">< a href ="#">怎麼解決ASP.NET下載時的中文文件名亂碼 ?</ a> </a>
13                     </td>
14                 </tr>
15                 <tr>
16                     <td class=" f12 mt10 color6 lh180" colspan="2">
17                         負載量不大的狀況下select、delete和update是響應很迅速的，最多加幾個索引就能夠搞定，但千萬級的註冊用戶和一個設計很差的多對多關係將帶來很是嚴重的性能題。另外在高的狀況下，更新一個...
18                     </td>
19                 </tr>
20                 <tr>
21                     <td class=" f12 mt10 color6 h40">
22                         < a href ="#">黑樹 </ a> / <a href ="#"> Javascript</ a> / 3人回答 / 2人關注 / 18人瀏覽
23                     </td>
24                     <td class="f12 color6 tr h40">
25                         1小時前
26                     </td>
27                 </tr>
28             </table>
29         </td>
30     </tr >
31 </table>