表格(table)屬性cellspacing、cellpadding


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 html5中不再支持table的cellspacing和cellpadding屬性 在html5中不支持 [IE兼容性] Table 之邊框 (IE6 IE7 IE8(Q) 中 cellspacing 屬性在重合的邊框模型的表格中仍然有效) table中cesllspacing與cellpadding的區別 table表格標簽的屬性 html表格(table)常用屬性 html與表格(table)相關的屬性 基於CSS屬性display:table的表格布局的使用 vue,elementui——table表格中的:formatter屬性
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM
的cellpadding 和 cellspacing ; 2) 如何用css實現 cellpadding, cellspacing ; 3) tr , th 是 有 border, 沒有 padding 的. CSS中Cellpadding和 Cellspacing用法和定義