bgcolor属性在现代html中已彻底废弃，html5完全移除，w3c要求用css控制样式；浏览器仅保留不可靠兼容性支持，且不支持透明度、伪类联动及响应式适配。

bgcolor 属性在现代 HTML 中已彻底废弃，直接写它不仅无效，还会让文档无法通过验证，且在多数浏览器中被忽略。

为什么 bgcolor 不起作用？

HTML5 完全移除了 bgcolor（包括在 <table>、<code><tr>、<code><td> 上的用法），W3C 明确要求用 CSS 控制样式。浏览器出于兼容性可能偶尔“容忍”旧写法，但行为不可靠——比如 Chrome 120+ 和 Firefox 125+ 已完全忽略该属性。<ul><li>错误写法：<code><table bgcolor="#f0f0f0"> → 实际无背景色<li>控制台会报 warning：<code>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）。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

边框与背景色冲突时怎么处理？

默认 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 媒体查询

真正麻烦的不是“怎么加背景”，而是加完之后是否在缩放、高对比模式、屏幕阅读器下依然可用——这点容易被跳过。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！