DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 細邊框表格的實現方法
細邊框表格的實現方法
編輯:CSS詳解     

  在Html中,我們設置border=”1″ 時,表格邊框實際大小是2px,那如果我們要做成1px的細線表格要怎麼辦?以前在做1px的表格的時候,我會用表格背景顏色,然後再用另一種顏色設計單元格的背景,再把表格間距設置成1px,這樣就能達到我們的1px表格了,如下例:

<table align="center" bgcolor="#f90" border="0" cellpadding="0" cellspacing="1" width="80%">
<tr>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
</tr>
<tr>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
</tr>
<tr>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
</tr>
</table>

    這種方法雖然可以實現,但是頁面裡的代碼多了很多,而且要控制局部也相對麻煩些。

    下面的這種方法及其簡單,Html代碼也減少了很多,結構更加的清晰。

    CSS部分:

<style type="text/CSS">
<!--
table{
border-collapse:collapse;
}
td{
background:#ffc;
border:solid 1px #f90;
height:22px;
}
-->
</style>

    Html部分:

<table width="80%" align="center">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved