网页排版的时候不要忘了table标签

【概况】

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，这样就要右边就要固定宽度，还有最下面的时间块浮动会有问题，如图：

 

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>

用这种方法，布局上基本上不用写什么样式，直接用td布局，标签是多点，但结构清晰点，并且右边宽度会自适应，如图：

 

 

【总结】

上面用三种方式实现了列表效果，div+css的方式很流行，但有时候试着用用传统的方法，可能会让本身的思惟更开阔点。上面代码很简单，本人一直作后端，前台写的少，要有前端大神路过的话，还劳烦驻足指点一二。上面三种方式都能实现想要的效果，你们挑本身喜欢和擅长的，不能受个人影响，我可不想误人子弟。

div+css布局是很强大，但像上面这种左右上下结构很清晰的用table的特性貌似更方便咱们完成页面，只是善用其利、因地制宜吧。

谢谢阅读和支持，我爱大家。