如何设置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间距：

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标准。