DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 制作1px邊框表格的幾種方法
制作1px邊框表格的幾種方法
編輯:Dreamweaver相關     

有過網頁制作經驗的朋友一定知道:一般來講,把表格的邊框定義為1px時,即border=1,而實際上是2px。而我們在很多時候需要那種真正的邊框為1px的表格,下面就介紹幾種方法。

  一、用嵌套表格

  用兩個表格嵌套,外層的表格的長與寬比裡層的多出2px,並設置對齊屬性為水平居中、垂直居中,然後把外層表格的背景設為你需要的邊框顏色,裡層表格背景設為與網頁背景相同,這樣就實現我們的願望了,實例如下:

  <table cellspacing="0" cellpadding="0" bgcolor="#000000" width="32" height="32" border="0">
  <tr>
  <td align="center">
  <table cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="30" height="30" border="0">
  <tr>
  <td> </td>
  </tr>
  </td>
  </tr>
  </table>

  二、設置亮、暗邊框顏色

  表格有亮邊框(bordercolorlight)和暗邊框(bordercolordark)兩個屬性,把表格邊框(border)設為1px,亮邊框(bordercolorlight)設為背景色,暗邊框(bordercolordark)設為你需要的實際邊框顏色就可以了,實列如下:
  
  <table border="1" cellpadding="0" cellspacing="0" width="32" height="32" bordercolorlight="#000000" bordercolordark="#FFFFFF">
  <tr>
  <td> </td>
  </tr>
  </table>

三、用CSS定義(一)

  代碼為:
  style="border-collapse: collapse"

  實例如下:

  <table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse" bordercolor="#000000" cellpadding="0">
  <tr>
  <td> </td>
  </tr>
  </table>

  如果你用過Frontpage xp,你會發現,在Frontpage xp中定義的表格默認的設置就是用CSS定義過了的。

  四、用CSS定義(二)

  代碼為:
  style="border: 1px solid #000000;"

  實例如下:

  <table cellspacing="1" width="32" height="32" style="border: 1px solid #000000; ">
  <tr>
  <td> </td>
  </tr>
  </table>


  有一點一定要注意:這時候不要再設置表格邊框(border)、亮邊框(bordercolorlight)和暗邊框(bordercolordark)屬性,否則不會出現預想的結果

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