bgcolor 属性在 html5 中已被完全移除，属不可靠遗留行为，必须改用 css 的 background-color 属性实现背景色设置。
bgcolor 属性不能用——它在 HTML5 中已被完全移除，浏览器虽可能“勉强渲染”，但属于不可靠的遗留行为，且现代构建工具（如 Vite、Webpack）、Linter（ESLint + HTML plugin）或严格模式下会直接报错或忽略。
为什么 bgcolor 会失效或被警告
HTML4.01 就已标记 bgcolor 为 deprecated，XHTML 1.0 Strict 彻底剔除，HTML5 标准中无定义。你写的 <td bgcolor="#ff0000"> 在 Chrome/Firefox 最新版本里可能“看起来还行”，但以下情况会立刻出问题：<br>• 启用 <code>Content-Security-Policy 的站点会拦截内联表现属性
• 使用 SSR 框架（如 Next.js、Nuxt）时，服务端渲染阶段可能抛出 DOM 解析异常
• 自动化测试（如 Playwright）校验 HTML 合法性时失败
• 屏幕阅读器或高对比度模式下，bgcolor 不触发任何语义样式适配
style="background-color: ..." 是唯一可靠写法
必须用 CSS 的 background-color 属性，通过 style 内联、<style></style> 块或外部 CSS 文件注入。三者中，style 属性最直接，适合动态/一次性设置：
• 支持所有颜色格式：red、#f00、#ff0000、rgb(255, 0, 0)、hsl(0, 100%, 50%)
• 可与其他样式共存：style="background-color: #e3f2fd; padding: 6px; border: 1px solid #90caf9;"
• 注意：不要写成 style="bgcolor: #f00" —— 这是无效 CSS，浏览器直接忽略
• 若需透明背景，用 rgba(0,0,0,0.1) 或 hsla(...)，background-color: transparent 也合法
给特定单元格设色时容易漏掉的细节
仅加 background-color 不等于视觉生效，还需同步处理边框与表格结构：
• border-collapse: collapse 必须设在 <table> 上，否则单元格间有默认 2px 间隙，背景色被“割裂”<br>• 单元格边框若未显式声明颜色（如 <code>border: 1px solid #ccc），可能继承父级或浏览器默认灰边，掩盖背景意图
• <th> 默认加粗+居中，若只设 <code>background-color 而不调 font-weight 或 text-align，视觉权重可能失衡
• 多语言内容（如孟加拉语、阿拉伯语）需确认字体支持，否则背景色虽对，文字却显示为方块 —— 此时应搭配 font-family 声明
复杂表格建议用 class 替代重复 style
当多个 <td> 需同类背景（如状态色：<code>status-error、status-success），硬编码 style 会导致维护灾难：
• 颜色值散落在 HTML 各处，改主题时要全局搜索替换
• 无法利用 CSS 变量做主题切换（如 background-color: var(--status-warning);）
• 无法配合 :hover/:focus-visible 等伪类增强交互
推荐做法：
• 定义类：<style>.bg-warning { background-color: #fff3cd; } .bg-success { background-color: #d4edda; }</style>
• 应用：<td class="bg-warning">⚠️ 过期</td>
• 动态场景（如 JS 渲染）可操作 element.classList.add("bg-warning")
真正难的不是“怎么填颜色”，而是确保颜色在各种设备、模式、辅助技术下都按预期呈现——比如深色模式下 #ffffff 背景可能变成刺眼白，而 background-color: Canvas（CSS 系统色）才能自适应。这已经超出 bgcolor 的能力范围，也说明为什么它必须被淘汰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
