cellpadding 已被 HTML5 废弃，必须用 CSS padding 替代；它在规范中无合法地位，仅浏览器兼容解析，真正生效的是作用于 td/th 的 padding 样式。
cellpadding 已被 HTML5 废弃，必须用 CSS padding 替代
直接结论：cellpadding 不是“不推荐”，而是 W3C 规范中已无合法地位。浏览器仍能解析它，但校验工具会报 warning，CI/CD 流水线或团队 ESLint 配置可能直接拦截。你写 <table cellpadding="8"> 不会崩，但它是技术债，不是兼容性兜底方案。
真正起作用的，永远是作用在 td 和 th 上的 CSS padding。别试图在 table 标签上做文章 —— 它不接受样式逻辑，也不响应状态变化。
为什么 padding: 8px 不等于 cellpadding="8"？边界陷阱在这里
表面看，td { padding: 8px; } 和 cellpadding="8" 效果一样。但实际渲染中，容易因以下原因错位：
-
border-collapse: collapse下，padding依然生效，但如果你没重置td, th的默认padding（多数浏览器给 8–10px），叠加后实际内边距远超预期 - 表格设置了
table { font-size: 0; }（常见于消除 inline 元素间隙），而你用了padding: 0.5em→ 实际值缩为 0px，内容紧贴边框 -
line-height与padding叠加影响行高：单行文本 +line-height: 1.2+padding: 12px可能导致文字垂直居中偏移或截断，这在 div 布局里不常出现
统一设置 vs 差异化控制：选对选择器很关键
别用 table td 这种低 specificity 写法，容易被组件库或框架样式覆盖。优先用：
立即学习“前端免费学习笔记（深入）”；
-
td, th { padding: 8px 12px; }→ 简洁、可控、覆盖所有单元格 -
td:first-child, th:first-child { padding-left: 6px; }→ 首列微调，避免和左侧 border 拥挤 -
.data-table td { padding: 6px 10px; }→ 限定作用域，防止污染全局 - 需要响应式？直接加媒体查询：
@media (max-width: 768px) { .data-table td { padding: 4px 6px; } }
动态修改单元格内边距时，别碰 DOM 的 cellPadding 属性
JS 中写 table.cellPadding = "12" 是可行的，但它本质是设置 DOM 属性，不是触发 CSS 更新：
- 无法配合
transition做渐变动画 - React/Vue 等框架中，这种直操作易被 rerender 覆盖，且破坏响应式数据流
- 不能基于伪类（如
:hover）或状态（如.is-editing td）条件化调整 - 正确做法：切换 class，比如
table.classList.add("compact")，再配.compact td { padding: 4px; }
真正难处理的，从来不是怎么设 8px，而是当 padding 和 line-height、font-size: 0、border-collapse 同时存在时，高度计算突然失准 —— 这个组合问题，在纯 flex 布局里几乎不会遇到，但在表格里每天都在发生。
