cellspacing 和 cellpadding 已不推荐使用,应改用 CSS 的 border-spacing 和 padding;前者仅在 border-collapse: separate 下生效,后者易被 CSS 覆盖,且二者均无法单独控制行列或单元格,HTML5 中已列为过时属性。

直接说结论:cellspacing 和 cellpadding 虽然还能用,但已不推荐在新项目中使用;现代写法应统一用 CSS 的 border-spacing 和 padding 控制间距,否则容易被覆盖、响应式失效、难以单独控制某一行或某一列。
为什么 cellspacing 在某些浏览器里没反应?
cellspacing 只在 border-collapse: separate 模式下才生效,而现代浏览器默认可能应用了全局重置样式(比如 table { border-collapse: collapse; }),导致该属性被忽略。
- 检查是否全局设置了
border-collapse: collapse—— 这会让cellspacing完全失效 -
cellspacing是整表统一值,不能设成5px 10px(水平/垂直不同),而 CSS 的border-spacing: 5px 10px支持 - IE ≤ 7 不支持
border-spacing,但它们也基本退出历史舞台;如需兼容,可 fallback 到cellspacing+ 条件注释(极少见) - 若你用的是框架(如 Bootstrap、Tailwind),它们通常已重置表格样式,
cellspacing更大概率被覆盖
cellpadding 看起来没起作用,常见原因是什么?
cellpadding 设置的是单元格内容到边框的距离,但它会被 CSS 中更具体的 td, th { padding: ... } 覆盖 —— 而且 CSS 优先级永远高于 HTML 属性。
- 浏览器 DevTools 里检查
td元素,看padding是否被其他样式覆盖(尤其是 reset.css 或框架样式) -
cellpadding="0"在 Chrome/Firefox 中仍可能生效,但一旦写了td { padding: 4px; },它就彻底无效 -
cellpadding无法只给某个td单独设置,而padding可以:比如<td style="padding-left: 20px;">xxx <li>注意:HTML5 规范中这两个属性已“过时(obsolete)”,不是“废弃(deprecated)”,意味着仍被支持但不鼓励使用</li> <h3>用 CSS 替代的实操写法(推荐)</h3> <p>把原来写在 <code><table cellspacing="8" cellpadding="6">的逻辑,换成以下三行 CSS 就够了:立即学习“前端免费学习笔记(深入)”;
table { border-collapse: separate; border-spacing: 8px; } td, th { padding: 6px; }-
border-collapse: separate是前提,否则border-spacing不起作用 -
border-spacing支持两个值:border-spacing: 8px 4px表示水平 8px、垂直 4px -
padding可以分别设padding-top、padding-inline-start等,适配 RTL 或特殊对齐 - 如果想让表格“无间隙”,用
border-collapse: collapse,此时border-spacing无效,但单元格边框会合并 —— 这和cellspacing="0"视觉效果一致,但机制不同
真正容易被忽略的是:表格的视觉“间距感”其实由三部分共同决定——单元格之间的空隙(
border-spacing)、内容离边框的距离(padding)、以及表格自身与周围元素的距离(margin)。只调其中一个,往往达不到预期效果。 -



















