bgcolor属性在HTML5中已被废弃，必须用CSS的background-color替代；推荐通过class统一管理样式，并同步设置color确保可读性，避免内联style和!important，动态场景应使用JS或框架绑定。

bgcolor 属性在现代 HTML 中已失效

直接用 bgcolor 给表格行（<tr>）设颜色，浏览器会忽略——它早在 HTML5 中被正式废弃，连基本兼容性都不保证。你看到颜色生效，大概率是旧版浏览器或编辑器的残留行为，上线后必然出问题。

用 CSS 的 background-color 替代 bgcolor

真正可靠的方式是给 <tr> 加内联样式或 class。比如警示行需要红色背景：

<tr style="background-color: #ffebee;">
  <td>库存不足</td>
  <td>12</td>
</tr>

更推荐用 class，便于复用和维护：

• 在 <head> 或外部 CSS 中定义：.warning-row { background-color: #ffebee; }
• HTML 中写：<tr class="warning-row">
• 避免用 !important，否则后续覆盖困难

警惕 background-color 和 color 的组合冲突

设了红色背景后，文字可能看不清——默认黑色文字在浅红上对比度不足。必须同步调整文本色：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

<tr class="warning-row">
  <td style="color: #c62828;">库存不足</td>
</tr>

或者统一在 CSS 里写死：

• .warning-row { background-color: #ffebee; color: #c62828; }
• 注意：如果单元格（<td>）自身有 color 样式，会覆盖 <tr> 的设置
• 用浏览器开发者工具检查 computed styles，确认最终生效的是哪一层

批量高亮多行时别硬写多个 style

如果要动态标记几行（比如后端返回的异常数据），手动加 style 很容易漏或错。正确做法是用 JS 或模板引擎批量处理：

• JS 示例：rows[i].style.backgroundColor = 'lightcoral';
• Vue/React 中绑定 class：:class="{ 'warning-row': item.isCritical }"
• 避免用 document.write 或拼接字符串插入 HTML，易 XSS

真实项目里，bgcolor 这种写法现在只该出现在遗留系统维护场景中——而且第一件事就是把它替掉。颜色本身不难，难的是确保它在所有设备、所有状态下都按预期显示。