在前端开发中，表格是一个经常用到的元素。如何用 CSS3 来优美地写出表格，让表格看起来更加美观、清晰，这是我们需要解决的问题。

<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>工作</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
<td>男</td>
<td>学生</td>
</tr>
<tr>
<td>小红</td>
<td>22</td>
<td>女</td>
<td>初级工程师</td>
</tr>
</tbody>
</table>

以上是基本的表格结构，下面我们通过 CSS3 的样式来美化它。

table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
text-align: center;
font-size: 16px;
}
thead {
background-color: #f2f2f2;
font-weight: bold;
}
th, td {
padding: 0.5rem;
border: 1px solid #ccc;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}

代码解释：

• border-collapse: collapse;：合并表格单元格的边框线
• width: 100%;、max-width: 800px;：使表格自适应屏幕大小，在大屏幕上看起来不会太宽
• margin: 0 auto;：水平居中对齐
• text-align: center;：表格内容居中对齐
• font-size: 16px;：设置表格字体大小
• background-color: #f2f2f2;：thead 和 tbody 的背景色为浅灰色
• font-weight: bold;：thead 的内容字体加粗
• padding: 0.5rem;：单元格内边距为 0.5rem
• border: 1px solid #ccc;：单元格边框为 1px 灰色实线
• tbody tr:nth-child(even) { background-color: #f2f2f2; }：tbody 内的偶数行背景色也为浅灰色，方便区分

最终效果如下：