表格(table)屬性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的值等於多少,那表格內的單元格從自身邊界開始向內保留多少空白,單元格里的元素永遠都不會進入那些空白里。