bgcolor属性在html5中已被废弃，必须用css的background-color替代；推荐通过class统一管理样式，并同步设置color确保可读性，避免内联style和!important，动态场景应使用js或框架绑定。
bgcolor 属性在现代 HTML 中已失效
直接用 bgcolor 给表格行（<tr>）设颜色，浏览器会忽略——它早在 HTML5 中被正式废弃，连基本兼容性都不保证。你看到颜色生效，大概率是旧版浏览器或编辑器的残留行为，上线后必然出问题。
<h3>用 CSS 的 background-color 替代 bgcolor</h3>
<p>真正可靠的方式是给 <code><tr> 加内联样式或 class。比如警示行需要红色背景：
<pre class="brush:php;toolbar:false;"><tr style="background-color: #ffebee;">
<td>库存不足</td>
<td>12</td>
</tr></pre>
<p>更推荐用 class，便于复用和维护：</p>
<ul>
<li>在 <code> 或外部 CSS 中定义：.warning-row { background-color: #ffebee; }
<tr class="warning-row">
<li>避免用 <code>!important，否则后续覆盖困难警惕 background-color 和 color 的组合冲突
设了红色背景后，文字可能看不清——默认黑色文字在浅红上对比度不足。必须同步调整文本色：
<tr class="warning-row"> <td style="color: #c62828;">库存不足</td> </tr>
或者统一在 CSS 里写死：
.warning-row { background-color: #ffebee; color: #c62828; }- 注意：如果单元格（
<td>）自身有 <code>color样式，会覆盖<tr> 的设置 <li>用浏览器开发者工具检查 computed styles，确认最终生效的是哪一层</li> <h3>批量高亮多行时别硬写多个 style</h3> <p>如果要动态标记几行（比如后端返回的异常数据），手动加 style 很容易漏或错。正确做法是用 JS 或模板引擎批量处理：</p> <ul> <li>JS 示例：<code>rows[i].style.backgroundColor = 'lightcoral'; - Vue/React 中绑定 class：
:class="{ 'warning-row': item.isCritical }" - 避免用
document.write或拼接字符串插入 HTML，易 XSS
真实项目里，bgcolor 这种写法现在只该出现在遗留系统维护场景中——而且第一件事就是把它替掉。颜色本身不难，难的是确保它在所有设备、所有状态下都按预期显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
