| 導購 | 订阅 | 在线投稿
分享
 
 
 

細邊框表格的實現方法

來源:互聯網  2008-08-15 05:13:31  評論

在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>

在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>
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有