如何设置HTML表格间距？

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

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

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

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

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

   

   <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;（默认值无需额外设置）。

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>

常见问题解决

1. 边框重叠问题
   若需合并边框（如细线表格），用border-collapse: collapse;，但此时border-spacing无效。
   改用padding间距：

   table { border-collapse: collapse; }
   td { padding: 10px; border: 1px solid black; }

2. 响应式适配
   使用百分比或rem单位确保间距自适应：

   

   table { border-spacing: 1rem 0.5rem; }
   td { padding: 2%; }

总结建议

• 优先使用CSS：border-spacing控制单元格间距，padding边距。
• 兼容性：border-spacing兼容所有现代浏览器（包括IE8+）。
• 避免过时属性：cellspacing和cellpadding已淘汰，不利于代码维护。

引用说明：本文内容参考MDN Web文档关于border-spacing和padding的权威指南，遵循W3C标准。