HTML5中cellspacing已废弃，必须用CSS替代：核心是设置border-collapse: separate并配合border-spacing（如border-spacing: 4px 8px），且仅对<table>生效；若设为collapse则border-spacing被忽略。
cellspacing 在 HTML5 中已被废弃，必须用 CSS 替代
HTML 的 cellspacing 属性在 HTML5 中完全无效，浏览器会忽略它。如果你看到表格边框“重叠”或“挤在一起”，实际是默认的 border-collapse: collapse 行为——单元格边框合并成一条线，不是“重叠”，而是被设计成这样。想获得类似旧版 cellspacing="2" 的间隔效果，核心思路是改用 border-collapse: separate + border-spacing。
border-spacing 是 cellspacing 的直接替代方案
border-spacing 只在 border-collapse: separate 时生效，它控制单元格之间的水平和垂直间距（单位支持 px、em、rem 等）。注意：它不作用于表格外边框，只管内部单元格间隙。
常见写法：
table {
border-collapse: separate;
border-spacing: 4px; /* 水平 & 垂直均为 4px */
}或分别设置：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: separate;
border-spacing: 4px 8px; /* 水平 4px，垂直 8px */
}- 如果只设一个值，如
border-spacing: 2px，则水平垂直都取该值 - IE6/7 不支持
border-spacing，但它们也不支持 HTML5，现代项目基本无需兼容 - 若表格有
th或td自带border，border-spacing会把它们“撑开”，视觉上就是 cell 之间留空
为什么加了 border-spacing 还没效果？检查这几点
最常见原因是没显式声明 border-collapse: separate —— 浏览器默认是 collapse，此时 border-spacing 完全无效。
- 确认表格没有全局或父级样式强制设置了
border-collapse: collapse - 检查是否误用了
padding：给td加padding是撑单元格内容距离，不是单元格间距；border-spacing才是真正的“单元格间空白” - 如果表格嵌套，外层
table的border-spacing不影响内层table，需单独设置 - 使用
display: table-cell模拟表格布局时，border-spacing不生效——它只对真实<table>元素有效
想让边框看起来“更粗”或“带阴影”，别碰 cellspacing
有人试图用 cellspacing 实现“加粗边框”效果，这是误解。真正可控的方式是：
- 给
table、th、td单独设border，比如border: 2px solid #ccc - 配合
border-collapse: collapse让多条边框合并，避免双线 - 需要立体感？用
box-shadow给td加阴影，但注意会影响布局流，慎用
记住：border-spacing 控制的是“空隙”，不是“边框粗细”。混淆这两者，调试会绕远路。
