用CSS製做表格初級篇

在人們都開始使用div+css的時候每每忽略了表格的重要性，在不少場合如會員註冊等表單的使用時用表格製做比div+css要更具效率性。

下面簡單和你們分享一下如何用css來製做表格

在講如何製做表格以前先和你們分享一下關於table的幾個基本標籤

table  表示表格的對象，tr表示表格的行，td表示每一個單元格。這是使用最多3個的標籤。

caption 定義表格的名稱，tbody     定義表格內容區，thead    定義表格頭，tfoot      定義表格頁腳，th          定義表頭的單元格。這些在傳統的表格設計上幾乎沒有被使用，而在符合web標準的css佈局中卻很是實用。好比表頭，若是使用thead來標記表頭的話，那麼對錶頭就沒必要再對tr進行特別的class制定，只要用table thead選擇符就能夠進行樣式設計。

實例：

<table id="table">

<thead>

<tr>

<th>css特徵1</th><th>css特徵2</th><th>css特徵3</th>

</tr>

<tbody>

<tr>內容1</tr><tr>內容2</tr><tr>內容3</tr>

</tbody>

<tfoot>

<tr>表格頁腳</tr>

</tfoot>

</table>

這個例子應用了表格頁頭，內容和表格頁腳3部分，都放在了id爲table的標籤中。

下面簡單講一下表格的樣式控制

其實表格的樣式控制和其餘對象的樣式控制沒什麼區別。同樣是使用width，margin，border，等等屬性來控制表格的樣式。

這須要指出的一點是，在對錶格對象進行樣式控制是，須要注意到是「 border-collapse：collapse；」這個是屬性設置，此屬性是將表中中單元格之間的線條合併。若是不合並，那麼每一個單元格都將擁有1px的邊框，（若是你的單元格邊框爲1px的話）而兩個鄰近的單元格的邊框就是兩者之和。若是使用了 border-collapse：collapse則能夠避免相似狀況出現。

 本博廣告代碼頁面就是利用css控制表格來實現的。讀者能夠查看一下源代碼！

地址： [url]http://www.2d30.cn[/url]（原文章地址） 版權全部，轉載時必須以連接形式註明做者和原始出處及本聲明。