CSS表格

在网页设计中，表格是一个常见的元素，用于展示数据和信息。通过使用CSS（层叠样式表），我们可以对表格进行样式和布局的定制，使其看起来更加美观和符合设计需求。本文将详细介绍如何通过CSS来设计和美化表格。

1. 创建基本表格

首先，我们需要创建一个基本的表格结构。一个简单的HTML表格结构如下所示：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

上面的代码中，我们创建了一个包含姓名、年龄和性别信息的简单表格。接下来，我们将通过CSS来美化这个表格。

2. 添加样式

我们可以使用CSS来改变表格的颜色、边框、字体等样式。下面是一个简单的CSS代码示例，用于对表格进行样式调整：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

在上面的代码中，我们通过设置表格的宽度为100%，使其占据整个容器的宽度。另外，我们还调整了单元格的边框样式、内边距、文字居中对齐以及表头和偶数行的背景颜色。

3. 表格样式效果

通过应用上面的CSS样式，我们可以看到表格的样式已经发生了变化，看起来更加美观和清晰：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

通过CSS样式调整后的表格如下所示：

姓名	年龄	性别
张三	25	男
李四	30	女

4. 表格布局

除了样式调整，我们还可以通过CSS来调整表格的布局，如调整列宽、行高等。下面是一个简单的CSS代码示例，用于调整表格的布局：

th:nth-child(1),
td:nth-child(1) {
  width: 100px;
}

th:nth-child(2),
td:nth-child(2) {
  width: 50px;
}

th:nth-child(3),
td:nth-child(3) {
  width: 80px;
}

tr {
  height: 40px;
}

在上面的代码中，我们通过nth-child选择器来分别设置第一列、第二列和第三列的宽度。另外，我们还调整了每行的高度为40px。

5. 表格布局效果

通过应用上面的CSS样式，我们可以看到表格的布局已经发生了改变，列宽更加均匀，行高也得到了调整：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

通过CSS调整后的表格如下所示：