实现表格填充 CSS

在网页设计中，表格是常用的元素之一，经常用于展示数据和布局。表格的填充则是设置单元格或表格的内边距和外边距。本文将介绍如何使用 CSS 实现表格填充。

单元格填充

单元格填充可以通过 padding 属性进行设置。具体而言，可以通过以下代码将单元格的内部填充设置为 10px：

td {
    padding: 10px;
}

此外，可以通过指定不同方向的填充量以实现更自由的填充效果，例如：

td {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

这样设置后，单元格内部的填充将分别在顶部、右侧、底部和左侧产生不同的填充效果。

表格填充

表格填充则可以通过设置 border-spacing 和 padding 属性来实现。其中，border-spacing 属性用于设置表格的外边距，padding 属性则用于设置表格单元格的内边距。例如：

table {
    border-spacing: 10px;
    padding: 20px;
}

这样设置后，表格的四周将会使用 10px 的外边距，而各单元格内部则会有 20px 的内边距。

代码演示

以下代码演示了如何使用 CSS 实现表格填充效果：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>男</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>20</td>
    <td>女</td>
  </tr>
</table>

table {
  border: 1px solid gray;
  border-spacing: 10px;
  padding: 20px;
}

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

效果如图：

总结

通过本文的介绍，我们了解了如何使用 CSS 实现表格的填充效果。在设计网页时，良好的表格布局和填充可以极大提升用户体验和页面整洁程度。