站長之家-站標logo圖片
歡迎你來到站長之家!
攜手合作圖片
banner圖片
當前位置:網站首頁 >> 網站技術 >>



DIV+CSS技術實現類似table表格的效果


【發布人:站長之家    發布日期:2015-04-03】

表格在網頁制作中使用非常廣泛,是顯示序列組合數據的主要形式之一。DIV+CSS雖然在制作網頁中有其獨到的優勢,相比table制作網頁有更簡短的代碼,然而在實現某些表格時卻并沒有table實現起來更直觀方便。其實使用DIV+CSS技術也可以實現類似table表的效果,站長們可以使用常見的ul和li來實現表格中的單元格,表格如果帶有邊框,則站長可以設置li元素的border-top、border-left、border-left、border-right四個邊框來設置表格單元格的邊框,包括邊框的顏色和粗細都可以自定義。下面,站長之家在多個瀏覽器中測試了一個使用DIV+CSS技術實現類似table表效果的實例,并帶有實例運行的圖片截圖,來說明如何使用DIV+CSS技術來實現表格的效果。

下面就將使用DIV+CSS技術實現的類似table效果的實例代碼展示在下面,并附上實例圖片。本實例在多個瀏覽器包括IE、Chrome、360瀏覽器等瀏覽器下測試通過運行顯示正常。

<!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=gb2312" />
<title>DIV+CSS實現類似table表格的效果</title>

<style type="text/css">
.divclass { width: 450px; height:200; border-top: #000 1px solid; border-left: #000 1px solid; }
.divclass ul { list-style:none; margin:0; padding:0; width: 450px; margin: 0px; }
.divclass ul li { float: left; width: 149px; height: 49px; list-style-type: none; border-right:#000 1px solid; border-bottom: #000 1px solid; text-align: center; line-height: 50px;}
</style>

</head>
<body>

<div class="divclass">
<ul>
<li style="width: 449px;">00000</li>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
<li>77777</li>
<li>88888</li>
<li>99999</li>
</ul>
</div>

</body>
</html>

下面的圖片是本實例代碼執行的結果圖示,從圖中可以看到使用DIV+CSS實現的表格效果絕不亞于使用table實現的表格效果。其實現起來的代碼也很簡單明了。各位站長們可以結合圖片來更好地理解實例代碼。

DIV+CSS實現的類似table效果實例圖片



(本頁地址為:http://www.hdfwko.tw/tech/tech-8.html,請尊重別人勞動,不要復制和采集。轉載請注明本文出處)

信息顯示圖片
頁腳blank圖片

版權所有:站長之家【www.hdfwko.tw】

四川快乐12开奖号