cellpadding 和 cellspacing 是 html5 已废弃的 table 属性，前者统一设置单元格内容到边框的内边距，后者统一设置相邻单元格边框间的间隙；现代开发应改用 css 的 padding、border-spacing 和 margin 实现更灵活、可维护的控制。
cellpadding 和 cellspacing 是 HTML <table> 标签的旧有属性，用于快速控制单元格内部留白和单元格之间间隙。虽然它们在浏览器中仍能渲染，但<strong>HTML5 已正式废弃这两个属性</strong>，现代开发中应改用 CSS 实现更可靠、可维护的控制。<hr>
<h3>cellpadding：控制内容与单元格边框的距离</h3>
<p>它作用于整个表格，统一设置所有 <code><td> 和 <code><th> 内容到边框的内边距（即“字离边有多远”）。<br>
例如：<pre class="brush:html;toolbar:false;"></pre>
<table border="1" cellpadding="8"><tr>
<td>左</td>
<td>右</td>
</tr></table>
<p>这会让每个单元格的文字距离上下左右边框都保持 8 像素。<br>
⚠️ 注意： </p>
<ul>
<li>它只接受一个数值（如 <code>cellpadding="12"），不能分别设上下左右；
td { padding: 4px; }，会直接覆盖 cellpadding，后者失效； cellspacing：控制单元格之间的间隙
它定义相邻单元格边框之间的距离（不是表格外边距，也不是内容间距）。
例如：
| A | B |
| C | D |
此时 A 和 B 之间、A 和 C 之间都会留出 6 像素空隙。
⚠️ 注意：
- 若设置了
border-collapse: collapse（常见于 Bootstrap 或重置样式），cellspacing就完全无效； - 它也不支持
cellspacing="5 10"这类水平/垂直分离写法； - 同样是整表统一值，无法按列、按行差异化调整。
为什么现在不推荐直接用它们？
- 语义不清：属性挂在
<table> 上，却影响 <code><td> 内部布局； <li>缺乏灵活性：不能响应式、不能选择性应用、不能继承或覆盖； </li> <li>维护困难：一旦项目需要主题切换或适配暗色模式，内联属性很难批量修改； </li> <li>验证失败：HTML5 文档类型下会触发 W3C 验证警告。</li> <hr> <h3>替代方案（推荐）</h3> <p>✅ <strong>用 <code>padding替代cellpadding
给<td> 或 <code><th> 设置内边距，支持方向控制和单位多样化：<pre class="brush:css;toolbar:false;">td, th { padding: 6px 12px; } /* 上下6px，左右12px */ td.first-col { padding-left: 20px; }</pre> <p>✅ <strong>用 <code>border-spacing替代cellspacing
需配合border-collapse: separate（默认值，但常被重置）：table { border-collapse: separate; border-spacing: 4px 2px; /* 水平4px，垂直2px */ }✅ 真正调表格“外边距”，用
margin
别混淆概念——cellspacing不是表格离周围元素的距离，那得靠：table { margin: 16px auto; }不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
