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