使用 CSS 對表格進(jìn)行美化，是一項(xiàng)必須的技能，因?yàn)楸砀衲J(rèn)的樣式實(shí)在太蒼白。

<table>   <caption>     21天CSS入門更新記錄   </caption>   <thead>     <tr>       <th>序號</th>       <th>文章標(biāo)題</th>       <th>發(fā)布時間</th>     </tr>   </thead>   <tbody>     <tr>       <td>01</td>       <td>CSS入門準(zhǔn)備</td>       <td>2024-09-18</td>     </tr>     <tr>       <td>02</td>       <td>簡介與語法</td>       <td>2024-09-19</td>     </tr>     <tr>       <td>03</td>       <td>選擇器</td>       <td>2024-09-20</td>     </tr>     <tr>       <td>04</td>       <td>值和單位</td>       <td>2024-09-21</td>     </tr>     <tr>       <td>05</td>       <td>字體和字號</td>       <td>2024-09-22</td>     </tr>     <tr>       <td>06</td>       <td>顏色和背景</td>       <td>2024-09-23</td>     </tr>     <tr>       <td>07</td>       <td>鏈接</td>       <td>2024-09-24</td>     </tr>     <tr>       <td>08</td>       <td>邊框</td>       <td>2024-09-25</td>     </tr>     <tr>       <td>09</td>       <td>外邊距（margin）和填充（padding）</td>       <td>2024-09-26</td>     </tr>   </tbody>   <tfoot>     <tr>       <th scope="row" colspan="3">一共將更新21篇。</th>     </tr>   </tfoot> </table> 

上述完整的表格，在不應(yīng)用任何 CSS 的前提下，顯示如下：

今天來學(xué)習(xí)如何使用 CSS 對上述默認(rèn)表格進(jìn)行美化。

?? CSS 學(xué)習(xí)要求了解基本的 HTML，如果還不熟悉，可以參考本號下的 HTML21 天入門教程。

表格邊框（border）

.table-one, .table-one th, .table-one td {   border: 1px solid #ccc; } 

<table class="table-one">   <!--為節(jié)省空間，這里具體的表格不再展示--> </table> 

首先定義表格的邊框，定義了類.table-one 并應(yīng)用在了 table 上。

這里注意，在定義邊框時，不僅是定義了 table 元素的，同時還定義了在 table 元素之中使用的 th 和 td 元素。

這樣加上樣式的效果如下：

折疊邊框（border-collapse）

可以看到，加上邊框之后，表格內(nèi)容的邊框似乎是雙線，這是因?yàn)槟J(rèn)情況下 th 和 td 有獨(dú)立的邊界。

.table-two {   border-collapse: collapse; } 

為 table 設(shè)置折疊邊框，如下，然后追加到 table 的樣式類里，如下。

<table class="table-one table-two">   <!--為節(jié)省空間，這里具體的表格不再展示--> </table> 

這時顯示的表格效果已經(jīng)接近正常的表格了，但還可以更好。

寬度（width）高度（height）和文字對齊(text-align)

.table-three {   width: 600px; }  .table-three th {   height: 40px; }  .table-three td {   height: 30px;   text-align: center; }  .table-three td:nth-child(2) {   text-align: left; } 

為表格指定了寬度，同時為 th 和 td 指定了高度。

由于 th 默認(rèn)就是居中對齊的，這里不再設(shè)置。但對于 td，希望設(shè)置它序號和日期列居中，而標(biāo)題左對齊。

這里在 td 中把全部的列都設(shè)置了居中對齊，然后使用偽類.nth-child()，設(shè)置了第 2 列為左對齊。

<table class="table-one table-two table-three">   <!--為節(jié)省空間，這里具體的表格不再展示--> </table> 

別忘了要在 table 元素中應(yīng)用上剛才新定義的類.table-three。

效果如下，看起來又自然了一些。

填充（padding）和顏色（color、background-color）

.table-four th {   background-color: green;   color: white; }  .table-four td {   padding: 10px;   height: 20px; }  .table-four tr:nth-child(even) td {   background-color: lightgreen; }  /*為了更好的顏色融合，這里把前面table-one里的設(shè)置的邊框顏色改成了#333*/ .table-one td {   border: 1px solid #333; } 

雖然前面使用了高度讓表格看起來舒展了些，但它沒有改變左右的間隙。

這里在 td 上把高度寫回了 20px，然后設(shè)置了填充為 10px，整體看起來更為舒展自然。

另外，對 th 設(shè)置了背景色，由于背景色比較深，把文字顏色設(shè)置成了白色。

同時對內(nèi)容行實(shí)現(xiàn)了隔行背景色不同。這里使用了偽類:nth-child(even)選擇了偶數(shù)行，并把它下面的 td 背景色設(shè)置了新的顏色。

同樣也可以使用:nth-child(odd)對奇數(shù)行的背景色進(jìn)行設(shè)置，如果需要的話。

<table class="table-one table-two table-three table-four">   <!--為節(jié)省空間，這里具體的表格不再展示--> </table> 

在應(yīng)用上.table-four 之后，表格看起來如下：

這樣的表格看起來是不是比沒有應(yīng)用任何 CSS 樣式的好看得多了？

總結(jié)

• ?? 表格默認(rèn)的樣式比較粗糙，可以通過組合使用 border、padding、text-align 等使表格樣式更好。

• ?? 表格的 th 和 td 默認(rèn)有獨(dú)立的邊界，可以通過折疊邊框 border-collapse 的方式隱藏多余的邊框線。

• ?? 通過搭配偽類，如 nth-child()，可以對表格實(shí)現(xiàn)更多的樣式變化控制。