HTML 表格间距

在本文中，我们将介绍HTML中表格间距的使用方法和示例。表格间距是指表格边框与其中内容之间的空白区域，通过设置表格间距，可以调整表格的外观和排版效果。

阅读更多：HTML 教程

什么是表格间距？

表格是HTML中一种常用的数据展示方式，其中包含了行和列。表格间距是指在表格的边框与表格内部内容之间的空白区域。通过设置合适的表格间距，可以增加表格的可读性和美观度。

如何设置表格间距？

在HTML中，可以通过CSS样式来设置表格间距。常用的设置表格间距的CSS属性是padding和border-spacing。

使用padding属性设置间距

padding属性用于设置元素的内边距，包括表格。通过为表格添加padding属性，可以设置表格的边框和内容之间的间距。

<style>
  table {
    padding: 10px;
  }
</style>

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

上述示例中，通过设置表格的padding为10px，实现了表格边框与内容之间的间距。

使用border-spacing属性设置间距

border-spacing属性用于设置表格边框之间的间距。通过为表格的CSS样式添加border-spacing属性，可以改变表格边框和内容之间的间距。

<style>
  table {
    border-spacing: 10px;
  }
</style>

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

上述示例中，通过设置表格的border-spacing为10px，实现了表格边框和内容之间的间距。

表格间距的注意事项

在设置表格间距时，需要注意以下事项：

padding属性会影响到表格内容和单元格之间的间距，而border-spacing属性只会影响表格边框之间的间距；
通过设置border-collapse属性为collapse可以让表格边框合并，进一步调整表格间距；
可以为不同的表格设置不同的间距，通过为表格添加不同的CSS样式类，并定义对应的间距属性。

示例

下面是一个示例，展示了如何通过设置表格间距改变表格的外观。

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
  }

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

  .large-spacing {
    border-spacing: 20px;
  }

  .small-spacing {
    border-spacing: 5px;
  }
</style>

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

<table class="large-spacing">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

<table class="small-spacing">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>