最直接方式是用style属性设置background-color，废弃bgcolor；复用场景推荐class+CSS；注意父元素背景透出规则；动态染色优先切换class而非内联样式。
HTML 表格中直接设置单个 <td> 背景色
想让某个单元格（<td>）有独立背景色，最直接的方式就是用 style 属性内联写死：background-color。它优先级高、不依赖外部 CSS，适合快速调试或一次性样式。
常见错误是误用 bgcolor 属性——这个属性在 HTML5 中已废弃，现代浏览器虽大多仍兼容，但校验会报错，且无法和 CSS 变量、渐变等新特性配合。
- ✅ 正确写法：
<td style="background-color: #ffeb3b;">黄色单元格</td> - ❌ 过时写法：
<td bgcolor="#ffeb3b">黄色单元格</td> - ⚠️ 注意：如果该
<td>同时被外部 CSS 类（如.highlight）设置了background-color，内联样式仍会生效，但若类里加了!important，就可能被覆盖
用 class 控制多个 <td> 的差异化背景色
当需要复用样式（比如“成功”“警告”“错误”三类单元格），用 class + 外部 CSS 更清晰可控。关键是避免把颜色值硬编码进 HTML，把样式逻辑收口到 CSS 层。
例如：
<td class="status-ok">✓ 通过</td> <td class="status-warn">⚠ 超时</td> <td class="status-error">✗ 失败</td>
CSS 部分：
.status-ok { background-color: #e8f5e9; }
.status-warn { background-color: #fff3cd; }
.status-error { background-color: #f8d7da; }
- 好处：改颜色只需动 CSS，不影响 HTML 结构；支持 :hover、@media 等扩展
- 坑点：别在 class 名里塞具体颜色名（如
bg-yellow），否则语义弱、后期维护难——用业务含义命名（status-error），而不是视觉描述 - 兼容性：所有现代浏览器都支持，无需 Polyfill
避免 <tr> 或 <table> 样式污染 <td>
有时候给 <tr> 设置了 background-color，却发现个别 <td> 没生效——不是 bug，是 CSS 继承和层叠规则在起作用：<td> 默认是透明背景，会透出父级 <tr> 的颜色；一旦你给 <td> 显式设了 background-color，它就完全覆盖掉父级了。
- ✅ 想让某列统一变色？直接给
<td>加 class，别依赖<col>（它只影响宽度/对齐，不控制背景） - ✅ 想让整行变色但留一个单元格例外？给那个
<td>单独设background-color: white或其他值 - ⚠️ 坑：用
rgba()或半透明色时，叠加顺序会影响最终视觉效果，建议在 DevTools 里实时检查 computed styles
动态设置 <td> 背景色的 JS 场景
后端返回数据后，前端根据字段值自动染色（比如数值 > 100 就标红），这时候得靠 JS 操作 style.backgroundColor 或切换 class。
推荐用 class 切换而非内联样式，理由很实际：
- 方便批量更新：改一个 CSS 类就能调整所有同类单元格的视觉表现
- 避免字符串拼接颜色值出错（比如忘了
#或写错十六进制位数） - 可结合 CSS transitions 做平滑过渡（
transition: background-color 0.2s）
示例（纯 JS）：
document.querySelectorAll('td[data-score]').forEach(td => {
const score = parseFloat(td.dataset.score);
td.classList.toggle('high-score', score > 90);
td.classList.toggle('low-score', score < 60);
});
对应 CSS：
.high-score { background-color: #c8e6c9; }
.low-score { background-color: #ffcdd2; }
注意：如果表格是动态渲染（React/Vue），别手动操作 DOM，应通过状态驱动 class 绑定。
真正容易被忽略的是透明度与可访问性——深色背景配浅色文字是基础，但用 opacity 降透明度会连带影响文字，应该用 background-color: rgba(...) 单独控制背景透明度；另外，色弱用户可能分辨不出相近色块，必要时加图标或文字标识辅助。
