应使用 CSS 的 padding 属性设置单元格内边距，而非已废弃的 HTML cellpadding 属性；后者仅作用于单元格内容与边框间，无法单独控边、响应式或动态调整，且违背 HTML 与 CSS 分离原则。
直接用 padding，别碰 cellpadding
HTML5 已正式废弃 cellpadding 属性，浏览器虽仍能解析（出于向后兼容），但 W3C 规范中它已无合法地位。你写 <table cellpadding="8"> 不会报错，但校验工具会标黄警告，CI/CD 流水线或团队 ESLint 配置也可能拦截。真正该操作的目标是 td 和 th 元素的 CSS padding，不是表格标签本身。
cellpadding 在哪还能见到？小心混淆场景
你可能在以下地方看到它，但都属于历史遗留或非标准用法：
- 老项目 HTML 源码里硬编码的
cellpadding值，尤其是 ASP.NET Web Forms 的HtmlTable.CellPadding服务端属性（如Table1.CellPadding = 5），它最终仍会渲染为内联 style 或被 JS 动态改写 - 某些 CMS 导出的 HTML 表格、邮件模板生成器输出（因 Outlook 等客户端对 CSS 支持弱，被迫回退）
- 开发者误把
cellpadding当成“表格整体内边距”，其实它只作用于每个单元格内容与自身边框之间，和margin或表格容器的padding完全无关
用 padding 控制单元格内边距的实操要点
CSS padding 是唯一推荐路径，关键在于选对作用对象和写法：
- 统一设置：用
td, th { padding: 8px 12px; }—— 上下 8px，左右 12px；四值语法padding: 4px 8px 6px 10px也完全支持 - 差异化控制：给特定列加 class，比如
<td class="action-cell">，再配.action-cell { padding: 4px 6px; } - 响应式缩放：用
@media (max-width: 768px) { td, th { padding: 4px 6px; } }在移动端收紧间距 - 注意继承：如果父容器有
font-size变化，而你用了em单位（如padding: 0.5em），实际像素值会浮动，建议优先用px或rem
为什么 cellpadding 被淘汰？不只是“过时”那么简单
它的问题不是年代久远，而是设计层面的硬伤：
立即学习“前端免费学习笔记（深入）”；
- 无法单独控制某一边：
cellpadding="10"强制四边等距，想让顶部留白多、右侧紧凑？做不到 - 无法条件化：不能配合伪类（如
:first-child）、媒体查询或 JS 状态动态调整 - 语义污染：把表现层逻辑（间距数值）塞进结构标签里，违背 HTML 负责语义、CSS 负责样式的现代分工
- 与
cellspacing易混淆：后者控制单元格之间的空隙，两者概念不同却共用相似命名，新人极易搞混
真正容易被忽略的是：即使你在 JS 中通过 table.cellPadding = "12" 动态修改，这个操作本质是设置 DOM 属性，现代框架（React/Vue）通常不鼓励这种直操作，且无法触发 CSS 过渡动画——而 padding 可以。
