在 CSS 中设置单元格填充和单元格间距

在HTML中，我们经常使用表格来展示数据。在表格中，单元格之间需要设置一些间距和填充，以使表格看起来更加美观。在CSS中，我们可以使用一些属性来设置表格单元格的填充和间距。

单元格填充

单元格填充（padding）指的是单元格内容与单元格边框之间的空间。我们可以使用CSS的padding属性来设置单元格填充。语法如下：

th, td {
  padding: 10px;
}

这将会将所有表头（th）和单元格（td）的填充设置为10px。我们也可以单独设置表头或单元格的填充：

th {
  padding: 10px;
}

td {
  padding: 5px;
}

这将会将表头的填充设置为10px，而单元格的填充设置为5px。

单元格间距

单元格间距（cellspacing）指的是相邻单元格之间的空间。我们可以使用CSS的border-spacing属性来设置单元格间距。语法如下：

table {
  border-spacing: 10px;
}

这将会将表格的单元格间距设置为10px。如果你需要分别设置水平和垂直方向的间距，可以使用border-spacing属性的两个值，第一个值表示水平方向的间距，第二个值表示垂直方向的间距，例如：

table {
  border-spacing: 10px 5px;
}

这将会将表格的水平方向间距设置为10px，垂直方向间距设置为5px。

实例

下面是一个带有行列线条和单元格间距的表格示例。CSS代码如下：

table {
  border-collapse: collapse;
  border-spacing: 10px 5px;
}

th, td {
  border: 1px solid black;
  padding: 10px;
}

这将会将表格的单元格边框设置为1px宽的黑色线条，同时设置单元格填充为10px，单元格间距的水平方向间距为10px，垂直方向间距为5px。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

输出结果如下：

如上所述，我们可以使用CSS的padding和border-spacing属性来设置单元格填充和单元格间距，以使表格看起来更加美观。