表格屬性cellspacing、cellpadding


上一頁  1 2 3  


  5、表格屬性cellspacing、cellpadding

  cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數值是數字,表示單元格間隙所佔的像素點數。

我們來看下面的兩個表格:
   
   
   
  上面第一個表格的單元格之間沒有空白距離,而第二個的單元格之間有很大的空白距離,我們來比較一下他們的源代碼:
第一個表格的代碼:
<table width="200" cellspacing="0" border="1" bordercolor="#000000">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

第二個表格的代碼:
<table width="200" cellspacing="8" border="1" bordercolor="#000000">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>


  比較代碼,上邊兩個表格中只有 cellspacing 的設置不同,一個爲“0”,一個爲“8”,顯示的結果就是第一個表格的每個單元格之間的距離爲0(在本例中由於我們爲了顯示的方便,將表格邊框設爲“1”,所以單元格的真實距離是“2”,若將表格邊框設爲“0”,則單元格 的距離就是0了,第二個單元格同理),第二個表格的每個單元格之間的距離爲8。

  cellpadding屬性用來指定單元格內容與單元格邊界之間的空白距離的大小。此屬性的參數值也是數字,表示單元格內容與上下邊界之間空白距離的高度所佔像素點數以及單元格內容與左右邊界之間空白距離的寬度所佔的像素點數。我們先來看看這個例子:

我們來看下面兩個表格:
網頁陶吧  
網頁陶吧  
  
  第一個表格單元格的內容與單元格邊界之間沒有空白距離,而第二個表格單元格的內容與單元格邊界之間有空白距離,我們來比較一下他們的源代碼:
第一個表格的代碼:
<table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="0"
<tr>
<td width="120">網頁陶吧</td>
<td> </td>
</tr>
</table>


第二個表格的代碼:
<table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="15"
<tr>
<td width="120">網頁陶吧</td>
<td> </td>
</tr>
</table>


  兩個表格只有紅色部分代碼不同。第一個表格中"網頁陶吧"這幾個字離它所在的單元格爲0,那是因爲設置了cellpadding="0"的原因.第一個表格中的"網頁陶吧"這幾個字離它所在的單元格比較遠,那是因爲cellpadding="15",也就是說"網頁陶吧"離它所在的單元格的邊界的距離爲20像素。簡單的說,cellpadding的值等於多少,那表格內的單元格從自身邊界開始向內保留多少空白,單元格里的元素永遠都不會進入那些空白裏。

  我們在以後的篇幅中會大量用到這兩個屬性,所以請大家不要弄混亂了, 爲了形象的理解,請參考下圖:
  
發佈了16 篇原創文章 · 獲贊 0 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章