最简单方式是用内联 style 设置 background-color，兼容性好；禁用已废弃的 bgcolor 属性；推荐十六进制或 rgb() 色值；大表格应改用 css 类统一管理；需设 border-collapse: collapse 避免背景色被边框割裂；渐变与透明背景需注意浏览器兼容性。
直接用 style 设置 background-color 最简单
不需要额外类名或 CSS 文件，单个单元格想换色就直接加内联样式。浏览器兼容性好，连 IE8 都支持。
常见错误是写成 bgcolor —— 这个属性早已被 HTML5 废弃，现代浏览器可能忽略或不渲染。
<td style="background-color: #f0f8ff">浅蓝</td><th style="background-color: #e6f7ff">表头浅蓝</th>- 颜色值支持十六进制、rgb()、英文名（如
lightcoral），但推荐用十六进制或 rgb()，更可控
用 CSS 类批量控制不同行/列背景色
手动写一堆 style 很容易漏、难维护，尤其表格大了之后。用类名 + 外部或 <style></style> 块更可靠。
典型场景：奇偶行变色、关键列高亮、状态列着色（如“失败”标红、“成功”标绿）。
- 给整行加类：
<tr class="error-row"><td>失败</td></tr>，再配 CSS.error-row { background-color: #ffebee; } - 给某列加类：
<td class="status-col">success</td>，CSS 用.status-col { background-color: #e8f5e9; } - 避免用
!important覆盖内联样式——优先删掉冲突的style，而不是硬顶
注意 border-collapse 对背景色显示的影响
默认表格边框是分离的（border-collapse: separate），此时单元格背景色会被边框“割裂”，相邻单元格之间有白缝；设成 collapse 后边框合并，背景色才能真正铺满、无缝衔接。
这是最容易被忽略的视觉问题，尤其在深色背景表格里，白缝特别显眼。
- 必须在
<table> 上设置：<code><table style="border-collapse: collapse"> <li>如果用了外部 CSS，建议全局设：<code>table { border-collapse: collapse; } - 设成
collapse后，border-spacing和border-collapse冲突，前者会失效 - 线性渐变：
<td style="background: linear-gradient(135deg, #ff9a9e, #fad0c4)">渐变</td> - 带透明度的背景色：
background-color: rgba(255, 99, 71, 0.1)（注意不是opacity，后者会让文字也变透明） - 背景图慎用：小图标可以，大图易拉伸变形；优先用
background-size: contain或cover控制
复杂背景需求：渐变、图片、透明度怎么处理
纯色够用，但有时需要更丰富效果。CSS3 支持直接在 td 或 th 上用 background 复合属性，但要注意叠加顺序和兼容性。
IE11 及以下对 background: linear-gradient() 支持有限，若需兼容，得加 -ms- 前缀或降级为纯色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
