不能用bgcolor，必须用style="background-color:"设置单元格背景色；bgcolor在HTML5中已被彻底移除，浏览器静默忽略，不支持透明度、伪类及现代框架集成，可靠方式是内联CSS或语义化class。
直接用 style="background-color:" 给 <td> 或 <th> 加内联样式，是最可靠、最即时生效的方式；bgcolor 属性在 HTML5 中已彻底失效，浏览器会静默忽略，别碰它。
为什么不能用 bgcolor？
bgcolor 是 HTML 4.01 的遗留属性，W3C 在 HTML5 中将其移除。你写 <td bgcolor="#ff0">，Chrome/Firefox/Safari 都不会解析——控制台不报错、也不渲染，纯属白写。它不支持透明度、不能被 CSS 选择器覆盖、无法与 :hover 或媒体查询联动，更没法和现代框架（如 React/Vue）的 class 管理机制共存。
常见错误现象：
- 本地预览似乎“有颜色”，但部署到生产环境后消失（尤其用了某些 CMS 或静态生成器时，HTML 被自动清理）
- 用 W3C Validator 校验失败，提示
Attribute bgcolor not allowed on element td - 加了
!important也无效，因为浏览器根本没把它当样式处理
怎么给单个单元格设背景色？
最简方式就是内联 style，但要注意几个关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须写全属性名：
background-color，不是background（后者可能意外清掉background-image或background-repeat） - 颜色值推荐用十六进制（如
#ffeb3b）或rgb()，避免命名色（如lightcoral）在旧浏览器中兼容性波动 - 如果表格用了
border-collapse: separate（默认），背景色会被边框间隙“割裂”，看起来像漏色——务必在<table>上加style="border-collapse: collapse;" - 单元格内容紧贴边框很难读，建议同步加
padding: 8px
示例：
<td style="background-color: #ffebee; border: 1px solid #f44336; padding: 8px;">失败</td>
多个同类单元格怎么统一管理？
手动写一堆 style 很容易漏、难维护，尤其表格动态生成时。改用语义化 class + CSS 规则更稳妥：
- 给单元格加 class，比如
<td class="status-error">，再在<style>或外部 CSS 中定义.status-error { background-color: #ffebee; } - 避免用位置型选择器（如
tr:nth-child(3) td:nth-child(2)），数据增删后极易错位；优先用data-属性驱动，例如<td data-status="warning">配合td[data-status="warning"] { background-color: #fff3cd; } - 如果整列要同色，用
td:nth-child(n), th:nth-child(n)，注意必须同时写td和th，否则表头不生效
背景色不显示？先查这三处
写了 style="background-color: red" 却没效果，大概率不是语法问题，而是被更高优先级规则压制：
- 父级
<tr>或<table>设置了背景色，且子元素没显式声明继承（background-color不继承） - 全局 CSS（如
normalize.css或框架样式）里有td { background: none; }这类兜底重置 - 开发者工具「Computed」面板里看到
background-color: transparent或rgba(0,0,0,0)，说明被其他规则覆盖
临时验证方法：在控制台执行 document.querySelectorAll("td, th").forEach(el => el.style.backgroundColor = "pink")，如果立刻变粉，就确认是样式优先级问题，不是渲染引擎故障。
真正麻烦的是边框和背景色叠加时的视觉误差——border 会压在 background-color 上层，导致背景看起来“被切掉一圈”。这不是 bug，是 CSS 渲染规范行为，得靠调整 border-width 或 padding 来补偿，而不是反复调 background-color 值。
