HTML5 中 bgcolor 属性已废弃，应使用 CSS 设置表头背景色：优先为 th 单独设色，或通过 thead th 选择器统一控制；需确保 thead 内含 tr 和 th 才能生效，避免仅作用于 thead 本身。
直接用 CSS 的 background-color 设置 <th> 或 <code><thead>
<code>bgcolor 属性在 HTML5 中已彻底废弃，所有现代浏览器虽仍能解析，但会触发控制台警告，且无法通过 W3C 验证。真正可靠的做法是用 CSS 控制背景色。
- 优先给
<th> 单独设色：语义清晰、粒度可控，比如 <code>th { background-color: #2c3e50; color: white; } - 若需整块表头区域统一风格（含边框、内边距、字体等），建议作用于
<thead>，再用后代选择器细化：<code>thead th { padding: 12px 16px; } - 不要只写
thead { background-color: #34495e; } —— 这只会给 <thead> 元素自身设背景，而它默认是透明的、无高度的容器，实际看不到效果<h3><code><thead> 里套 <code><tr> 和 <code><th> 才能生效<code><thead> 是语义容器，本身不渲染内容；真正承载颜色和样式的，是它内部的 <code><tr> 和 <code><th>。
<ul><li>常见错误：只给 <code><thead> 加 <code>style="background: #f1c40f"，结果背景色“消失”——因为 <thead> 没内容、没高度、没 display 行为<li>正确写法示例：<pre class='brush:php;toolbar:false;'><thead>
<tr>
<th>姓名</th>
<th>部门</th>
</tr>
</thead></pre>
然后样式写成：<code>thead tr { background-color: #3498db; } 或更稳妥的 thead th { background-color: #3498db; }
避免用内联 style 写死颜色，尤其在多表格场景
单个页面一个表格时，<th style="background-color:#e74c3c"> 看似快，但维护成本高：
<ul>
<li>颜色变更时要逐个改，容易漏</li>
<li>无法复用 hover、disabled 等交互状态样式</li>
<li>与响应式断点、主题切换完全脱节</li>
</ul>
<p>推荐做法：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>定义语义化类名，如 <code>class="table-header-primary"
- 在 CSS 中统一管理：
.table-header-primary { background-color: #2980b9; color: #fff; }
- 复杂项目可配合 CSS 自定义属性：
:root { --header-bg: #2c3e50; }，再用 background-color: var(--header-bg);
注意 border-collapse: collapse 对背景色显示的影响
当表格启用 border-collapse: collapse 时，<th> 之间的边框会合并，可能导致背景色被“挤压”或出现细缝。
<ul>
<li>如果发现表头单元格之间有白线或颜色不连贯，先检查是否用了 <code>border-collapse: collapse
<th> 单独设色：语义清晰、粒度可控，比如 <code>th { background-color: #2c3e50; color: white; }<thead>，再用后代选择器细化：<code>thead th { padding: 12px 16px; }thead { background-color: #34495e; } —— 这只会给 <thead> 元素自身设背景，而它默认是透明的、无高度的容器，实际看不到效果<h3><code><thead> 里套 <code><tr> 和 <code><th> 才能生效<code><thead> 是语义容器，本身不渲染内容；真正承载颜色和样式的，是它内部的 <code><tr> 和 <code><th>。
<ul><li>常见错误：只给 <code><thead> 加 <code>style="background: #f1c40f"，结果背景色“消失”——因为 <thead> 没内容、没高度、没 display 行为<li>正确写法示例：<pre class='brush:php;toolbar:false;'><thead>
<tr>
<th>姓名</th>
<th>部门</th>
</tr>
</thead></pre>
然后样式写成：<code>thead tr { background-color: #3498db; } 或更稳妥的 thead th { background-color: #3498db; }
避免用内联 style 写死颜色，尤其在多表格场景
单个页面一个表格时，<th style="background-color:#e74c3c"> 看似快，但维护成本高：
<ul>
<li>颜色变更时要逐个改，容易漏</li>
<li>无法复用 hover、disabled 等交互状态样式</li>
<li>与响应式断点、主题切换完全脱节</li>
</ul>
<p>推荐做法：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>定义语义化类名，如 <code>class="table-header-primary"
.table-header-primary { background-color: #2980b9; color: #fff; }
:root { --header-bg: #2c3e50; }，再用 background-color: var(--header-bg);
border-collapse: collapse 对背景色显示的影响border: 1px solid #2c3e50，而是确保 th 的 background-color 覆盖完整区域，必要时加 box-sizing: border-box 和明确的 padding
thead tr 设背景，再用 th 的 border 控制分隔，避免依赖单元格自身背景拼接bgcolor 属性看着省事，但它是 HTML4 时代的遗留物，现在用等于主动放弃语义、可访问性和样式扩展能力。真正麻烦的不是写几行 CSS，而是后续改需求时发现所有表头都散落在 HTML 里，没法批量调整。
