bgcolor 属性在 html5 中已被彻底移除，应改用 style="background-color: ..." 或 css 类替代，以确保标准兼容、样式可控及可维护性。
bgcolor 属性不能用，它在 HTML5 中已被彻底移除，浏览器可能渲染但不保证行为一致，且现代工具链（如 Linter、VS Code 插件、CI 检查）会直接报错。
为什么 bgcolor 现在会出问题
你写 <td bgcolor="#ff6b6b">数据</td>，看似能显示红色背景，但实际存在几个硬伤：
- W3C 标准中
bgcolor已从<td>、<code><tr>、<code><table> 等所有元素中删除； <li>部分浏览器（如新版 Safari 或严格模式下的 Chrome）可能忽略该属性，或仅在 quirks mode 下兼容；</li> <li>无法配合 <code>!important、媒体查询、伪类（如:hover）或透明度控制； - 与 CSS 自定义属性（
--cell-bg）、CSS-in-JS、Tailwind 等现代方案完全不兼容。
style="background-color: ..." 是最直接的替代方案
只需把 bgcolor 替换成内联 style，颜色值写法完全一致，迁移成本几乎为零：
<td style="background-color: #ff6b6b;">关键数据</td> <td style="background-color: rgb(255, 107, 107);">关键数据</td> <td style="background-color: coral;">关键数据</td>
注意以下细节：
-
background-color支持rgba(255, 107, 107, 0.2)，bgcolor完全不支持透明度； - 若单元格有边框，建议同时加
border-collapse: collapse到<table>，否则边框间隙可能导致背景色“露白”； <li>不要写成 <code>style="bgcolor: #ff6b6b"—— 这是常见手误，bgcolor不是 CSS 属性名。
用 CSS 类批量控制更安全、可维护
当多个单元格需要相同样式，硬编码 style 会重复且难维护。推荐定义类：
<style>
.cell-highlight { background-color: #ff6b6b; padding: 8px; }
.cell-ok { background-color: #4ecdc4; }
</style><td class="cell-highlight">异常值</td>
<td class="cell-ok">正常值</td>
这样做的实际好处：
- 一处修改，全局生效（比如统一调浅 10% 饱和度）；
- 可结合
@media做响应式背景适配（如深色模式下自动切灰阶）； - 便于用 JavaScript 动态增删类（
el.classList.add("cell-error")），而bgcolor无法被 JS 安全读写； - 避免因拼写错误（如
backgroud-color）导致样式静默失效 —— 浏览器开发者工具能明确提示类未定义。
容易被忽略的兼容性陷阱
你以为只是换了个写法？其实还有两个隐性坑：
-
background-color会继承父级tr或table的背景，如果父级也设了色，且没加!important，子级可能被覆盖 —— 最稳妥是显式声明，或用更具体的选择器（如table.my-table td.highlight）； - 某些旧 CMS 或富文本编辑器（如早期 TinyMCE）导出的 HTML 仍含
bgcolor，需用正则批量替换：bgcolor="([^"]*)"→style="background-color: $1;"，但注意十六进制值里可能带引号，得加转义逻辑。
bgcolor 看似省事，实则埋下调试黑洞；background-color 多敲几个字母，换来的是可预测、可调试、可扩展的控制力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
