使用 CSS 对表格进行美化，是一项必须的技能，因为表格默认的样式实在太苍白。

<table>   <caption>     21天CSS入门更新记录   </caption>   <thead>     <tr>       <th>序号</th>       <th>文章标题</th>       <th>发布时间</th>     </tr>   </thead>   <tbody>     <tr>       <td>01</td>       <td>CSS入门准备</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> 

上述完整的表格，在不应用任何 CSS 的前提下，显示如下：

今天来学习如何使用 CSS 对上述默认表格进行美化。

💡 CSS 学习要求了解基本的 HTML，如果还不熟悉，可以参考本号下的 HTML21 天入门教程。

表格边框（border）

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

<table class="table-one">   <!--为节省空间，这里具体的表格不再展示--> </table> 

首先定义表格的边框，定义了类.table-one 并应用在了 table 上。

这里注意，在定义边框时，不仅是定义了 table 元素的，同时还定义了在 table 元素之中使用的 th 和 td 元素。

这样加上样式的效果如下：

折叠边框（border-collapse）

可以看到，加上边框之后，表格内容的边框似乎是双线，这是因为默认情况下 th 和 td 有独立的边界。

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

为 table 设置折叠边框，如下，然后追加到 table 的样式类里，如下。

<table class="table-one table-two">   <!--为节省空间，这里具体的表格不再展示--> </table> 

这时显示的表格效果已经接近正常的表格了，但还可以更好。

宽度（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 默认就是居中对齐的，这里不再设置。但对于 td，希望设置它序号和日期列居中，而标题左对齐。

这里在 td 中把全部的列都设置了居中对齐，然后使用伪类.nth-child()，设置了第 2 列为左对齐。

<table class="table-one table-two table-three">   <!--为节省空间，这里具体的表格不再展示--> </table> 

别忘了要在 table 元素中应用上刚才新定义的类.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里的设置的边框颜色改成了#333*/ .table-one td {   border: 1px solid #333; } 

虽然前面使用了高度让表格看起来舒展了些，但它没有改变左右的间隙。

这里在 td 上把高度写回了 20px，然后设置了填充为 10px，整体看起来更为舒展自然。

另外，对 th 设置了背景色，由于背景色比较深，把文字颜色设置成了白色。

同时对内容行实现了隔行背景色不同。这里使用了伪类:nth-child(even)选择了偶数行，并把它下面的 td 背景色设置了新的颜色。

同样也可以使用:nth-child(odd)对奇数行的背景色进行设置，如果需要的话。

<table class="table-one table-two table-three table-four">   <!--为节省空间，这里具体的表格不再展示--> </table> 

在应用上.table-four 之后，表格看起来如下：

这样的表格看起来是不是比没有应用任何 CSS 样式的好看得多了？

总结

• 🍑 表格默认的样式比较粗糙，可以通过组合使用 border、padding、text-align 等使表格样式更好。

• 🍑 表格的 th 和 td 默认有独立的边界，可以通过折叠边框 border-collapse 的方式隐藏多余的边框线。

• 🍑 通过搭配伪类，如 nth-child()，可以对表格实现更多的样式变化控制。