div css再牛*也無法完全取代table，很多時候還是需要用到表格，這裡就不探討孰優孰劣，什麼時候要用表格什麼時候用div了。隨便搜下，幾十萬條。貼出dl dt dd模擬表格實例，不推薦在實際項目中使用，可以了解dl dt dd的用法。測試浏覽器：IE6IE7IE8FF3.0
CSS:
dl,dt,dd{
margin:0;
background:#fff5fa;
font-size:14px;
}
dl{
margin:0 auto;
width:50%;
border:1px solid #f8b3d0;
border-bottom:none;
}
dt{
font-weight:800;
background:#ff99cc;
color:#fff;
}
dt,dd{
line-height:30px;
padding:0 0 0 10px;
border-bottom:1px solid #f8b3d0;
height:30px;
overflow:hidden
}
dd{
text-indent:3em;
}
.fff{
background:#fff
}
dt span,dd span{
display:block;
float:right;
font-size:14px;
border-left:1px solid #f8b3d0;
text-indent:0em;
width:80px;
text-align:center;
}
Xhtml:
<dl class=hb>
<dt><span>下載地址</span><span>更新時間</span>ks5u生物同步課課練（人教版必修一）</dt>
<dd class=fff><span>——</span><span>11.2</span>第一節 從生物圈到細胞生物圈到細生物圈到細生物圈到細生物圈到細生物圈到細生物圈到細生物圈到細</dd>
<dd><span>——</span><span>11.3</span>第二節 細胞的多樣性和統一性</dd>
<dd class=fff><span>——</span><span>11.4</span>單元測評</dd>
<dd><span>——</span><span>11.5</span>歐美代議制的確立與發展</dd>
<dd class=fff><span>——</span><span>11.6</span>中國古代文化史</dd>
<dd><span>——</span><span>11.7</span>近代中國的政治、經濟及思想解放的潮流</dd>
<dd class=fff><span>——</span><span>11.9</span>近代中國政治發展史</dd>
<dd><span>——</span><span>11.10</span>近代中國經濟發展史</dd>
<dd class=fff><span>——</span><span>11.11</span>近代中國思想解放潮流</dd>
<dd><span>——</span><span>11.12</span>現代西方的政治、經濟與科技文化</dd>
<dd class=fff><span>——</span><span>11.13</span>羅斯福新政與二戰後的世界經濟</dd>
<dd><span>——</span><span>11.14</span>二戰後世界政治格局的演變</dd>
<dd class=fff><span>——</span><span>11.16</span>19世紀以來的世界文學藝術與科技</dd>
<dd><span>——</span><span>11.17</span>現代中國的政治、經濟及思想文化</dd>
<dd class=fff><span>——</span><span>11.18</span>現代中國政治發展史 </dd>
<dd><span>——</span><span>11.19</span>現代中國物質文明發展史（中國近現代社會生活的變遷、科技等）</dd>
<dd class=fff><span>——</span><span>11.30</span>古希臘羅馬的政治制度</dd></dl>