最可靠方式是直接用style写内联样式，因浏览器对表格样式继承“懒”，font-family、font-size等属性常不自动继承；复用场景宜用class管理；表头应优先用th而非td加粗；禁用font标签等过时属性。
直接用 style 写内联样式最可靠
浏览器对表格样式继承比较“懒”，font-family、font-size 这类属性不会自动从 <table> 或 <code><tr> 传到每个 <code><td>，尤其在旧版 Edge 或某些邮件客户端里，靠父级统一设经常失效。最稳的方式是给需要差异化的单元格单独加 <code>style。
比如让第一列用等宽字体、最后一行标题加粗变大：
| code001 | 用户A | 2024-05-20 |
| code002 | 用户B | 2024-05-21 |
| 合计：2 条记录 | ||
class 分类管理比重复写 style 更可持续
如果同一类字体样式在多个单元格复用（比如所有状态列都用红色小号字），硬写内联样式会难维护。这时提前定义 class，再挂到对应 <td> 上更清晰。
<p>常见踩坑点：</p>
<ul>
<li>忘记在 <code> 里加 <style></style> 或外链 CSS，导致 class 不生效
font 标签或 font-size 属性（已废弃），现代浏览器不支持td.status 却漏了空格写成 td.status（实际没问题）但误写为 td.status → 实际没问题，但若写成 td.status 和 td .status 就语义不同了推荐写法：
<style>
.status { color: #d32f2f; font-size: 12px; }
.code-cell { font-family: Consolas, 'Liberation Mono', monospace; }
.header-row td { font-weight: bold; background: #f5f5f5; }
</style>
| 编号 | 姓名 | 状态 |
| 001 | 张三 | 待审核 |
用 th 区分表头和数据单元格，天然带字体加粗
<th> 默认有 <code>font-weight: bold 和 text-align: center，不用额外写样式就能和 <td> 视觉区分开。很多开发者硬给 <code><td> 加 <code>font-weight: bold 去模拟表头，反而增加冗余代码。
注意两点：
<th> 应只用于真正承担表头语义的单元格，不是“想加粗就用 <code>th”- 如果要统一整行表头字体（比如全部用
font-family: sans-serif），直接设th的样式比逐个设更省事 - 某些屏幕阅读器依赖
<th> 识别表格结构，乱用会影响可访问性 <p>示例：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"><style> th { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } </style></pre> <table> <tr> <th>ID</th> <th>名称</th> <th>操作</th> </tr> <tr> <td>1</td> <td>项目A</td> <td><a href="#">编辑</a></td> </tr> </table> <h3>避免用 <code>font标签或align等过时属性<font face="..."></font>、<center></center>、align="center"这些 HTML4 时代的写法，在现代 HTML5 中已被废除，Chrome/Firefox 虽仍兼容，但 W3C 不再校验，VS Code 会标黄警告，邮件客户端（如 Outlook）解析也极不稳定。替代方案很明确：
- 字体：用
font-familyCSS 属性，优先提供 fallback 字体（如"Helvetica Neue", Arial, sans-serif） - 大小：用
font-size（单位推荐px或rem，避免pt） - 颜色：用
color，别用<font color="..."></font> - 居中：用
text-align: center，不是align="center"
错误写法（不要模仿）：
<td align="right"><font face="Arial" size="2">¥128.00</font></td>
正确写法：
<td style="text-align: right; font-family: Arial, sans-serif; font-size: 14px;">¥128.00</td>
表格字体控制真正麻烦的不是怎么写，而是不同单元格要响应不同业务含义——比如“金额”要右对齐+等宽数字字体，“状态”要带颜色语义，“ID”要防止折行。这些细节一旦漏掉，视觉上就容易误导人。 - 字体：用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
