HTML中table标签的cellpadding属性怎么使用-html教程-PHP中文网

cellpadding 属性仍被浏览器解析但已废弃，html5 中为 obsolete，w3c 验证报错，且一旦存在 td/th 的 css padding 声明即完全失效；正确替代方案是直接为 td、th 设置 css padding。

html中table标签的cellpadding属性怎么使用

cellpadding 属性现在还能用吗

能用，但不该用。所有主流浏览器仍解析 cellpadding，但它在 HTML5 中是 obsolete（废弃）属性，W3C 验证器会报错，严格 DOCTYPE 下可能被忽略。更关键的是：只要页面里有任何一条针对 td 或 th 的 CSS padding 声明，cellpadding 就彻底失效——不是“优先级低”，而是被直接跳过。

给 table 写 cellpadding="10" 为什么没反应

常见原因就三个：

你写了类似 td { padding: 6px; } 的 CSS，它覆盖了 HTML 属性
用了 Bootstrap、Tailwind 等框架，它们默认给 td, th 设了 padding
在 DevTools 的 Elements 面板里检查某个 td，Computed 样式中 padding 显示来源是 “Styles” 而非 “Attributes”，说明已被 CSS 接管

注意：cellpadding 只作用于 table 元素，它本身不改变 td 的样式规则，只是在无 CSS 干预时作为 fallback 计算值。

替代 cellpadding 的正确 CSS 写法

必须把 padding 直接作用在 td 和 th 上，而不是 table：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

table { padding: 10px; } —— 完全无效，表格元素不支持自身内边距
td, th { padding: 8px 12px; } —— 推荐，上下 8px、左右 12px
th { padding: 10px 16px 6px; } td { padding: 6px 12px; } —— 表头和数据单元格区分控制
需要响应式？加媒体查询：@media (max-width: 768px) { td, th { padding: 4px 8px; } }

单位不限于像素，可用 em、rem、甚至 calc(0.5em + 2px)，这是 cellpadding 完全做不到的。

遗留代码里怎么安全过渡

如果老项目满屏 cellpadding="4"，别直接删，按顺序做：

先加全局 CSS：td, th { padding: 4px; }，确保视觉不变
再逐个删掉 table 上的 cellpadding 属性
避免混用：不要保留 cellpadding="4" 同时又写 td { padding: 4px; }，冗余且易引发维护困惑
JS 动态迁移不可靠：el.parentElement.cellPadding 在未显式声明时返回空字符串或浏览器默认值（通常是 1 或 2），不能当作真实值信任

真正容易被忽略的一点：cellpadding 是整数像素、四边均等、无法继承、无法响应式；而 CSS padding 是样式层第一公民——一旦启用，HTML 属性就退场，不是共存，是替换。