bgcolor属性在现代HTML中已彻底废弃，HTML5完全移除，W3C要求用CSS控制样式；浏览器仅保留不可靠兼容性支持，且不支持透明度、伪类联动及响应式适配。
bgcolor 属性在现代 HTML 中已彻底废弃，直接写它不仅无效，还会让文档无法通过验证，且在多数浏览器中被忽略。
为什么 bgcolor 不起作用？
HTML5 完全移除了 bgcolor（包括在 <table>、<tr>、<td> 上的用法），W3C 明确要求用 CSS 控制样式。浏览器出于兼容性可能偶尔“容忍”旧写法，但行为不可靠——比如 Chrome 120+ 和 Firefox 125+ 已完全忽略该属性。
- 错误写法：
<table bgcolor="#f0f0f0">→ 实际无背景色 - 控制台会报 warning：
The 'bgcolor' attribute on the 'table' element is obsolete. - 即使渲染出来，也无法响应式适配、不支持透明度、不能和伪类（如
:hover）联动
用 CSS 正确设置表格背景色的三种方式
优先级从高到低：单元格 > 行 > 整表。样式叠加时，更具体的规则胜出。
- 整张表背景：
table { background-color: #f9f9f9; } - 某一行背景：
tr:nth-child(odd) { background-color: #fafafa; }（常用于隔行变色） - 单个单元格背景：
td:first-child { background-color: #eef7ff; }或直接加class="highlight"后定义
注意：如果 td 有自身背景色，会覆盖 tr 的背景；而 table 的背景只在单元格间隙或边框外侧可见（除非设了 border-collapse: collapse）。
立即学习“前端免费学习笔记（深入）”；
边框与背景色冲突时怎么处理？
默认 border-collapse: separate 会让单元格之间留空隙，此时 table 的背景色会从缝隙中透出；设成 collapse 后，边框合并，背景色只在单元格内部生效。
- 想要统一底色 + 无间隙边框：
table { border-collapse: collapse; background-color: #f5f5f5; } td { background-color: white; /* 覆盖 table 背景 */ border: 1px solid #ddd; } - 想保留缝隙并显示表级背景：
border-collapse: separate;，再用border-spacing: 4px;控制间隙大小
兼容性与可访问性提醒
纯色背景没问题，但要注意两点：
- 避免用低对比度组合（如
#eee文字配#fff背景），WCAG 至少要 4.5:1 对比度 - 不要仅靠颜色传达信息（比如“红色行=错误”），得配合图标或文字标识
- 深色模式下，硬编码的
#ffffff可能刺眼，建议用color-scheme: light dark;或 prefers-color-scheme 媒体查询
真正麻烦的不是“怎么加背景”，而是加完之后是否在缩放、高对比模式、屏幕阅读器下依然可用——这点容易被跳过。
