DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS去除表格td默認間距及制作1px細線表
CSS去除表格td默認間距及制作1px細線表
編輯:CSS詳解     
現在在所謂“div CSS”的風氣下,很多人放棄了表格,其實應該讓每個標簽物盡其用,在表現數據的地方,我們還是應該使用table。但是,我們在建立table的時候,會發現它會具有一些默認的樣式,比如單元格td之間會有間距,所以我們通常開頭是這樣寫的:
示例代碼 [www.mb5u.com] <table border="0" cellspacing="0" cellpadding="0">
  在頁面內,通過cellspacing="0"將這個間距消除,合並邊框。現在,我們要一個干淨的表格table。

示例代碼 [www.mb5u.com] <table class="dir"> 
<caption>如何通過CSS去除表格默認樣式的間距</caption> 
<tr> 
<th>test</th> 
<th>test</th> 
<th>test</th> 
</tr> 
<tr> 
<td>test</td> 
<td>test</td> 
<td>test</td> 
</tr> 
</table> 

  我們只要給這個table一個border-collapse:collapse的樣式,就可以達到這個效果了。

示例代碼 [www.mb5u.com] .dir{ width:100%; border-left:#C8B9AE solid 1px;border-top:#C8B9AE solid 1px;border-collapse:collapse;} 
.dir td{width:25%;border-right:#C8B9AE solid 1px;border-bottom:#C8B9AE solid 1px;background-color: #D7D1CB;padding:10px 10px 6px;vertical-align: top;}

  這樣,我們達到了所需要的效果,並且,上面的CSS樣式還把表格table定義成了1px的細線表格。 

  在沒有對table進行內部樣式定義,而通過樣式表,成功的去除td默認的間距,以及定義為1象素的細線表格。真正做到了結構與表現的分離。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved