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

【概况】

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。但有时候在布局的时候，纯粹的用div感觉嵌套的太深，如果换成table来布局，虽说标签会多点，但结构会更加清晰。

 

【例子】

比如我要实现一个下面的用于博客上的文章列表，如下图：

 

一、用div方法，代码如下：

 <style type ="text/css">
     .item{width :710px ;padding-left :60px ;background :url("Images/default.jpg") no-repeat left top ;}
     .item.intro{width :710px ;}
 </style >
 <div class="item">
     <div class ="intro">
         <p>
             <a href="#">怎么解决ASP.NET下载时的中文文件名乱码 ?</a></ p>
         <p class="f12 color6">
             负载量不大的情况下select、delete和update是响应很迅速的，最多加几个索引就可以搞定，但千万级的注册用户和一个设计不好的多对多关系将带来非常严重的性能问题。另外在高的情况下，更新一个...
         </p>
         <p class="f12 color6">
             <a href="#">黑树 </a> / <a href ="#">Javascript</ a> / 3人回答 / 2人关注 / 18人浏览
         </p>
          <p class="f12 color6 fr" >
             1小时前
         </p>
     </div >
 </div>

用这种方法是将图片作为整体div的左上角背景，然后设置padding-left，这样就要右边就要固定宽度，还有最下面的时间块浮动会有问题，如图：

 

二、用dl方法，代码如下：

 <style type="text/css">
     .item dt{ width:60px ;float :left ;}
 </style>
 <dl class="item">
     <dt ><img width="48" height="48" alt="" src="Images/default.jpg" /></dt>
     <dd >
         <p>
             < a href ="#">怎么解决ASP.NET下载时的中文文件名乱码 ?</ a></ p>
         <p class="f12 color6">
             负载量不大的情况下select、delete和update是响应很迅速的，最多加几个索引就可以搞定，但千万级的注册用户和一个设计不好的多对多关系将带来非常严重的性能问题。另外在高的情况下，更新一个...
         </p>
         <p class="f12 color6">
             < a href ="#">黑树 </ a> / <a href ="#"> Javascript</ a> / 3人回答 / 2人关注 / 18人浏览
         </p>
     </dd >
 </dl>

用这种方法将dt向左浮动，不过其浮动会影响右边的内容，不过想办法也能将其解决，如图：

 

三、用table方法，代码如下：

 <table border="0" cellspacing="10" cellpadding="0" width="100%" class="mb20">
     <tr >
         <td class="w60" valign="top">
             <a href="#">
                 <img width="48" height="48" alt="" src="Images/default.jpg" />
             </a>
         </td>
         <td>
             <table border="0" cellspacing="10" width="100%">
                 <tr>
                     <td colspan="2">
                         <a href="#">< a href ="#">怎么解决ASP.NET下载时的中文文件名乱码 ?</ a> </a>
                     </td>
                 </tr>
                 <tr>
                     <td class=" f12 mt10 color6 lh180" colspan="2">
                         负载量不大的情况下select、delete和update是响应很迅速的，最多加几个索引就可以搞定，但千万级的注册用户和一个设计不好的多对多关系将带来非常严重的性能题。另外在高的情况下，更新一个...
                     </td>
                 </tr>
                 <tr>
                     <td class=" f12 mt10 color6 h40">
                         < a href ="#">黑树 </ a> / <a href ="#"> Javascript</ a> / 3人回答 / 2人关注 / 18人浏览
                     </td>
                     <td class="f12 color6 tr h40">
                         1小时前
                     </td>
                 </tr>
             </table>
         </td>
     </tr >
 </table>

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

 

【总结】

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

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

谢谢阅读和支持，我爱你们。