CSS布局實例：一個不錯的表格樣式_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
今天在藍色看到一個表格的設(shè)計圖，于是自己動手做了效果，雖然沒有達到圖中的效果，但也算不錯了！
[ 可先修改部分代碼 再運行查看效果 ]
HTML代碼：
CSS代碼：
代碼調(diào)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運行查看效果 ]
HTML代碼：
示例代碼 [m.dounai2.com]
<table width="590" cellspacing="1">
<caption>
text
</caption>
<thead>
<tr>
<th class="line1" scope="col">text</th>
<th scope="col">text</th>
<th scope="col">text</th>
<th class="line4" scope="col">More</th>
</tr>
</thead>
<tbody>
<tr>
<th height="78">text text text text</th>
<td>text text text text</td>
<td>text text text</td>
<td class="line4"> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<caption>
text
</caption>
<thead>
<tr>
<th class="line1" scope="col">text</th>
<th scope="col">text</th>
<th scope="col">text</th>
<th class="line4" scope="col">More</th>
</tr>
</thead>
<tbody>
<tr>
<th height="78">text text text text</th>
<td>text text text text</td>
<td>text text text</td>
<td class="line4"> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
CSS代碼：
示例代碼 [m.dounai2.com]
body{background-color:#D5DFE9;}
table{border-spacing:1px; border:1px solid #A2C0DA;}
td, th{padding:2px 5px;border-collapse:collapse;text-align:left; font-weight:normal;}
thead tr th{background:#B0D1FC;border:1px solid white;}
thead tr th.line1{background:#D3E5FD;}
thead tr th.line4{background:#C6C6C6;}
tbody tr td{height:50px;background:#CBE2FB;border:1px solid white; vertical-align:top;}
tbody tr td.line4{background:#D5D6D8;}
tbody tr th{height:50px;background: #DFEDFF;border:1px solid white; vertical-align:top;}
caption,tfoot{display:none;}
table{border-spacing:1px; border:1px solid #A2C0DA;}
td, th{padding:2px 5px;border-collapse:collapse;text-align:left; font-weight:normal;}
thead tr th{background:#B0D1FC;border:1px solid white;}
thead tr th.line1{background:#D3E5FD;}
thead tr th.line4{background:#C6C6C6;}
tbody tr td{height:50px;background:#CBE2FB;border:1px solid white; vertical-align:top;}
tbody tr td.line4{background:#D5D6D8;}
tbody tr th{height:50px;background: #DFEDFF;border:1px solid white; vertical-align:top;}
caption,tfoot{display:none;}
相關(guān)DIV+CSS實例：
- 固定div容器的寬高，圖片居中（圖片不限制大小）
- 用css制作有滾動條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧：text-indent隱藏文字(以圖換字)
- CSS實例：三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實例：很實用的圖文混排CSS列表-富有語義
- DivCSS實例：CSS菜單Flash效果用圖片模擬實現(xiàn)
- DivCSS布局實例用dldtdd來制作列表
- 相關(guān)鏈接：
- 教程說明：
DIV+CSS實例-CSS布局實例：一個不錯的表格樣式
。