谁帮我用div+css做一个table,4列,多行的

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    ul{list-style:none;width:372px;overflow:hidden;padding:0;margin:0;border-top:1px solid #000;border-left:1px solid #000}
    ul li{display:block;border-right:1px solid #000;border-bottom:1px solid #000;float:left;width:92px;}
    </style>
    </head><body>
    <ul class="table">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </body>
    </html>这样的?
      

  2.   

    要实现table干嘛不用table而用div,还要增加更多不必要的代码,这不是多此一举吗
    更何况table的兼容性比其他的元素都要好
      

  3.   

    <div style="width:100%"> 
    <div style="position:relative">
    <div style="width:25%;float:left;">栏目频道</div>
    <div style="width:25%;float:left;">栏目频道</div>
    <div style="width:25%;float:left;">栏目频道</div>
    <div style="width:25%;float:left;">栏目频道</div>
    </div>
    .
    .
    重复
    .
    <div style="position:relative">
    <div style="width:25%;float:left;">栏目频道</div>
    <div style="width:25%;float:left;">栏目频道</div>
    <div style="width:25%;float:left;">栏目频道</div>
    <div style="width:25%;float:left;">栏目频道</div>
    </div>
    </div> 
      

  4.   

    如果只是少量的文字,还是用TABLE的好,DIV+CSS 可行,但代码多,没必要为1K的文字,再费力写出1K的代码,且一旦有一点不小心,整个"表格"就会散了,或是走形了,速度上也不见得会快出多少的,不过如果是布局就另当别论了.
      

  5.   

    我看有不少人走入了误区
    谁说DIV就比TABLE好的?各得其所才是正确的。
      

  6.   

    楼主如果要简洁一点的这里的这个不知合不合意,看一下吧
    SOURCE:看一下效果效果
    这是我自己搞的,真的很麻烦,后悔没用表格,但都做出来了,也不想删了.一个痛苦的纪念吧.在FF中会有一点变化,最好试试
    <style type="text/css">#NCtable{width:59.5em}#NCtable,#NCtable ul{float:left;margin:0;padding:0}#NCtable #Bleft{border-width:0 0 0 1px;margin-left:120px}#NCtable li{font-size:1.4em;border-width:0 1px 1px 0;text-align:center;padding:3px}#NCtable li.Title{font-size:1em;font-weight:700;border-top-width:1px;background-color:#eee;padding:0.8em 3px}#NCtable li,#NCtable #Bleft,#NCtable li.Title{border:solid #999}</style>
    <div id="NCtable"><ul id="Bleft"><li class="Title">Valeur</li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>100</li><li>1,000</li><li>10,000</li><li>100,000,000</li></ul><ul style="background-color:#FFC"><li class="Title">Simp.</li><li>&#38646;</li><li>&#19968;</li><li>&#20108;</li><li>&#19977;</li><li>&#22235;</li><li>&#20116;</li><li>&#20845;</li><li>&#19971;</li><li>&#20843;</li><li>&#20061;</li><li>&#21313;</li><li>&#30334;</li><li>&#21315;</li><li>&#19975;</li><li>&#20159;</li></ul><ul style="background-color:#6CF"><li class="Title">Trad.</li><li>&#38646;</li><li>&#19968;</li><li>&#20108;</li><li>&#19977;</li><li>&#22235;</li><li>&#20116;</li><li>&#20845;</li><li>&#19971;</li><li>&#20843;</li><li>&#20061;</li><li>&#21313;</li><li>&#30334;</li><li>&#21315;</li><li>&#33836;</li><li>&#20740;</li></ul><ul style="background-color:#FFC"><li class="Title">Maj. Simp.</li><li>&#38646;</li><li>&#22777;</li><li>&#36144;</li><li>&#21441;</li><li>&#32902;</li><li>&#20237;</li><li>&#38470;</li><li>&#26578;</li><li>&#25420;</li><li>&#29590;</li><li>&#25342;</li><li>&#20336;</li><li>&#20191;</li><li>&#19975;</li><li>&#20159;</li></ul><ul style="background-color:#6CF"><li class="Title">Maj. Trad.</li><li>&#38646;</li><li>&#22777;</li><li>&#36019;</li><li>&#21444;</li><li>&#32902;</li><li>&#20237;</li><li>&#38520;</li><li>&#26578;</li><li>&#25420;</li><li>&#29590;</li><li>&#25342;</li><li>&#20336;</li><li>&#20191;</li><li>&#33836;</li><li>&#20740;</li></ul><ul style="background-color:#FFC"><li class="Title">Pinyin - N&deg; de ton.</li><li>l&#237;ng - ling2</li><li>y&#299; - yi1</li><li>&#232;r - er4</li><li>s&#257;n - san1</li><li>s&#236; - si4</li><li>w&#468; - wu3</li><li>li&#249; - liu4</li><li>q&#299; - qi1</li><li>b&#257; - ba1</li><li>ji&#468; - jiu3</li><li>sh&#237; - shi2</li><li>b&#462;i - bai3</li><li>qi&#257;n - qian1</li><li>w&#224;n - wan4</li><li>y&#236; - yi4</li></ul></div>
      

  7.   

    上面是我能做的代码最少的了,为了能使它代码少,接近<TABLE>花了一些时间.但还是不太理想.