在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
控制单元格内部边距（单元格边框与内容的间距）：<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>
常见问题解决
-
边框重叠问题
若需合并边框（如细线表格），用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%; }
总结建议
- 优先使用CSS：
border-spacing控制单元格间距，padding边距。 - 兼容性：
border-spacing兼容所有现代浏览器（包括IE8+）。 - 避免过时属性：
cellspacing和cellpadding已淘汰，不利于代码维护。
引用说明：本文内容参考MDN Web文档关于border-spacing和padding的权威指南，遵循W3C标准。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/36654.html
