表格中颜色常因继承、背景干扰或样式无效而失效，需用内联style="color:#xxx"并配合背景、圆角、留白等增强辨识度，同时检查td的color、background-color及line-height影响。
直接用 <span></span> 套文字 + style="color: #xxx" 就能生效，但表格里容易因继承、对齐或背景干扰导致颜色“看不见”或“不统一”，关键得管住继承链和渲染上下文。
为什么表格里 <span></span> 颜色经常失效
表格单元格（<td> 或 <code><th>）常自带默认样式，比如 <code>color 继承自 <table> 或全局 CSS；更常见的是背景色盖住了浅色文字，或者父级设置了 <code>!important 强制覆盖内联样式。
- 检查浏览器开发者工具中
<span></span>的 computed color，看是否被<td> 的 <code>color或font-color覆盖 - 如果
<td> 有 <code>background-color且和<span></span>文字色对比度低，人眼就难分辨 -
<span></span>不会自动加 padding 或 border，纯色文字贴着单元格边缘时，辨识度反而下降 - 正确：
<span style="color: #d32f2f;">错误</span> - 错误：
<span color="red">错误</span>（无效） - 错误：
<span class="status-error">错误</span>却没定义.status-error { color: #d32f2f; }（类存在但无样式） - 加浅色背景：
style="color: #1976d2; background-color: #e3f2fd; padding: 2px 6px; border-radius: 3px;" - 避免全大写或过小字号——
font-size: 13px是表格单元格里的安全下限 - 别依赖字体粗细（
font-weight: bold）做唯一区分，有些字体加粗后宽度突变，破坏表格对齐 - 如果用 CSS class，确保它作用在
<span></span>上，而不是误写成<td class="status-ok"> 再靠后代选择器，那样维护成本陡增 <p>表格里最易被忽略的不是怎么写 <code><span></span>，而是没检查<td> 是否悄悄重置了 <code>line-height或vertical-align，导致带 padding 的<span></span>悬浮或下沉——调完颜色，务必拉宽单元格看齐线。
<span></span> 加颜色必须带 style，不能只写 color 属性
<span color="red"></span> 是无效写法——color 不是 <span></span> 的 HTML 属性，浏览器直接忽略。必须走 CSS 路径。
十六进制推荐用 #d32f2f 这类高对比度值，别用 red 这种关键词——语义模糊，且在暗色模式下可能不可见。
立即学习“前端免费学习笔记（深入）”；
让状态标签真正“看得清”的最小增强组合
单靠颜色不够，表格里要快速识别状态，至少补一个视觉锚点：背景、圆角或轻微留白。
