如何设置HTML表格间距？

当前位置：首页 > 前端开发 > 如何设置HTML表格间距？

详情介绍

在HTML中设置表格间距主要使用cellspacing属性控制单元格间距，或通过CSS的border-spacing属性实现，同时可用cellpadding调整内容与边框间距，CSS的padding属性也可实现此效果。

在HTML中设置表格间距主要通过两种方式：传统HTML属性（如cellspacing和cellpadding）和现代CSS样式，以下是详细方法：

传统HTML属性（已过时，但需了解）

cellspacing
控制单元格之间的外部间距（表格边框与单元格边框的间距）：

<table cellspacing="10"> <!-- 单元格间距为10像素 -->
  <tr><td>内容1</td><td>内容2</td></tr>
</table>

cellpadding
控制单元格内部边距（单元格边框与内容的间距）：

如何设置HTML表格间距？第1张

<table cellpadding="15"> <!-- 内容与边框距离15像素 -->
  <tr><td>内容1</td><td>内容2</td></tr>
</table>

️ 注意：这些属性在HTML5中已废弃，建议改用CSS。

推荐方法：使用CSS

1. 设置单元格外部间距（替代`cellspacing`）

用border-spacing属性：

table {
  border-spacing: 12px; /* 水平+垂直间距均为12px */
  /* 或分开设置：border-spacing: 10px 5px; (水平 垂直) */
}

生效条件：必须设置border-collapse: separate;（默认值无需额外设置）。

如何设置HTML表格间距？第2张

2. 设置单元格内部边距（替代`cellpadding`）

用padding属性：

td, th {
  padding: 15px; /* 上下左右内边距 */
  /* 或分开设置：padding: 10px 20px; (上下 左右) */
}

3. 完整示例

<style>
  .custom-table {
    border-collapse: separate; /* 关键！确保border-spacing生效 */
    border-spacing: 8px 4px;   /* 水平8px 垂直4px */
    width: 100%;
  }
  .custom-table td, .custom-table th {
    padding: 12px;      /* 内容与边框距离 */
    border: 1px solid #ccc;
    background: #f9f9f9;
  }
</style>
<table class="custom-table">
  <tr><th>姓名</th><th>年龄</th></tr>
  <tr><td>张三</td><td>28</td></tr>
</table>

常见问题解决

边框重叠问题
若需合并边框（如细线表格），用border-collapse: collapse;，但此时border-spacing无效。
改用padding间距：
```
table { border-collapse: collapse; }
td { padding: 10px; border: 1px solid black; }
```
响应式适配
使用百分比或rem单位确保间距自适应：
```
table { border-spacing: 1rem 0.5rem; }
td { padding: 2%; }
```