table?div+css?_table转div+css-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaofanku/article/details/3325647

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