table?div+css?

相信很多网站现在布局都采用div,也有不在少数的兄弟或网站用的还是table.今天我们一起看看两者的优劣.当然只是从一个很小的应用侧面.
1.table不要您真不可能!
在布局时,table有自已的太多的优势,在此只举一个:自动延伸.会有人说div也可以呀.我只从代码量来权稳衡.在左右两列随内容自动拉长的页面:横1,纵2的布局中我还是会首先用table的.但不是说div+css在这个场景下实现不了需求.关键看代码量.
2.div+css您是我的最爱!
在论坛里有少了兄弟在问:如何把复杂的table换成div+css.这是一贴我曾回复的贴子:
url:http://topic.csdn.net/u/20080412/16/155b0430-f0fb-4f93-b1c2-7d6942caa425.html
代码如下:

<table width="769" border="1" cellpadding="0" cellspacing="0"> 

  <!--DWLayoutTable--> 

  <tr> 

    <td width="269" height="99" valign="top">1 </td> 

    <td width="308" valign="top">2 </td> 

    <td width="192" rowspan="3" valign="top">6 </td> 

  </tr> 

  <tr> 

    <td height="107" colspan="2" valign="top">3 </td> 

  </tr> 

  <tr> 

    <td height="144" valign="top">4 </td> 

    <td valign="top">5 </td> 

  </tr> 

</table> 

这时我们要分清数据和样式(外现)的比例.相信谁都不想重复烦重的敲打键盘动作.从示例的代码中不难看.html表签占了4/5的比例.如果页面有这样10个以上的table叠起来.在网速不理想;您又开了5个以上的connection连接数据库,情况可想而知.
再看div的情况:

<div id="layout"> 

<div id="topColumn2"> 

<ul> 

<li>1 </li> 

<li>2 </li> 

</ul> 

</div> 

<div id="topRow3">6 </div> 

<div id="middleColumn1">3 </div> 

<div id="bottomcolumn2"> 

<ul> 

<li>4 </li> 

<li>5 </li> 

</ul> 

</div> 

</div> 

如果割去id="",可以看出彼此代码的数量.好像还少了css.不要担心.浏览器会先解析html内容.再去套css样式表.如果您网站规划还算理想的情况下.css应用到html结构上的时间将几何级的缩短.

 

3.今天的CSS!
相信网站中都有这样的需求存在:根据数据库的内容以表格的样式显示:小举一例:

      <table width="670" border="0" cellpadding="0" cellspacing="0">

        <tr>

          <td width="325" height="30" valign="middle" class="gerenbg">　建筑行业</td>

          <td width="325" height="30" class="gerenbg">　金融行业</td>

        </tr>

        <tr>

          <td width="325" height="140" valign="top" bgcolor="#F4FAFF">记录</td>

          <td width="325" valign="top" bgcolor="#F4FAFF">记录</td>

        </tr>

        <tr>

          <td width="325" height="30" class="gerenbg">　机械行业</td>

          <td width="325" height="30" class="gerenbg">　传媒行业</td>

        </tr>

        <tr>

          <td width="325" height="140" valign="top" bgcolor="#F4FAFF">记录</td>

          <td width="325" valign="top" bgcolor="#F4FAFF">记录</td>

        </tr>

        <tr>

          <td width="325" height="30" class="gerenbg">　汽车行业</td>

          <td width="325" height="30" class="gerenbg">　电子行业</td>

        </tr>

        <tr>

          <td width="325" height="140" valign="top" bgcolor="#F4FAFF">记录</td>

          <td width="325" valign="top" bgcolor="#F4FAFF">记录</td>

        </tr>

      </table>

上面的示例仅是一个平面设计阶段的劣作.写有:记录,处的列还要套一个表格(有N条记录要罗列).我的天呀！还好老板不用我写这样的东东!.显示效果是一个多对多.多个行业,一个行业对多个记录.我想说的不只这些.在种情况下我们要用脚本控制换行和补位.

看div的代码:

      <div id="recordlist">

      <dl>

          <dt>建筑行业</dt>

      <dd>

          <ul>

           <li>记录 </li>

          </ul>

      </dd>

      </dl>

      <dl>

          <dt>金融行业</dt>

      <dd>

          <ul>

           <li>记录 </li>

          </ul>

      </dd>

      </dl>

      <dl>

          <dt>机械行业</dt>

      <dd>

          <ul>

           <li>记录 </li>

          </ul>

      </dd>

      </dl>  

       ...      

      </div>

最重要的是:我们的双层循环不再需要换行和补位.我们用CSS实现上面table所要呈现的外观.

CSS代码:

#recordlist{float:left;width:670px;height:auto;}

#recordlist dl{float:left;margin:0;padding-top:10px;padding-right:5px;width:330px;height:auto;}

#recordlist dl dt,#recordlist dl dd{float:left;margin:0;padding:0;width:330px;height:auto;}

#recordlist dl dt{padding-left:5px;width:325px;border:1px dashed #ddd;}

#recordlist dl dd ul{float:left;margin:0;padding:0;width:330px;height:auto;}

#recordlist dl dd ul li{float:left;margin:0;padding:0;width:165px;height:auto;list-style:none;}

4.总结:
不要作完美主义者.在不同的情况下,权衡用table,div是最重要的.个人观点：在结构很清晰时用table也不失为明智之举.在html结构很复杂时.不要犹豫div+css不会占用你太长的时间