应使用语义化html标签（如）和css布局替代做简历整体结构，因其符合ats解析、可访问性及响应式需求，仅在技能对比等三类数据场景中使用带的表格。
别用 <table> 做整体布局，这是最常踩、后果最重的坑——ATS 系统读不出结构，打印分页错乱，手机上直接挤成一团。
<h3>为什么 <code><table> 不该当<a style="color:#f60; text-decoration:underline;" title="简历" href="https://m.php.cn/zt/23893.html" target="_blank">简历</a>容器
<p>表格标签的语义是“二维数据”，比如成绩单、航班时刻表。你把“教育背景”塞进 <code><tr><td> 里，等于告诉屏幕阅读器：“这是一行数据，不是一段经历”。HR 系统（如 Moka、北森）解析时会丢掉上下文，只提取孤立字段，结果“2022.09–2026.06 清华大学 计算机科学与技术”被切成三段无关联文本。
<p>常见错误现象：</p>
<ul><li><code><table border="1"> 在 Gmail 或 ATS 里边框全消失
<li>嵌套 <code><table> 导致打印预览第二页只剩两行字
<li>加了 <code>rowspan 后改个公司名，整个时间线对不齐
真正该用 <table> 的地方只有三类：
<ul>
<li>技能熟练度对比（语言 | 熟练度 | 使用时长）</li>
<li>项目时间线（项目名 | 起止时间 | 角色）</li>
<li>课程成绩单（课程 | 学分 | 成绩）</li>
</ul>
<p>这些场景必须配 <code><thead> + <code><th scope="col">，否则可访问性不达标。
<h3>
<code><section></section> + CSS 才是模块化正解
简历本质是线性叙事：个人信息 → 教育 → 经历 → 技能。用语义化标签定义区块边界，再靠 CSS 控制流式行为，才能兼顾结构清晰和响应式适配。
实操建议：
- 每个主模块用
<section id="education"></section>包裹，而不是<div class="edu"> <li>教育/经历条目优先用 <code><dl> <dt>学校</dt> <dd>XX大学</dd> </dl>，比表格更易换行、更利于 ATS 提取 - 左右两栏（如左侧联系信息 + 右侧技能）用
display: grid，写死列宽不如grid-template-columns: 240px 1fr - 小屏堆叠只需加一句
@media (max-width: 768px) { grid-template-columns: 1fr; } -
字体 fallback 不全：CSS 中只写
font-family: "PingFang SC"，PDF 里变成方块。必须补全：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif -
分页断裂：工作经历被硬生生切到两页中间。给
<section></section>加break-inside: avoid，禁用margin-bottom换页 -
图标不显示：用
<img src="icon-email.svg">没问题，但用 icon font（如 Font Awesome）或 CSS::before生成的图标，PDF 里常为空白。改用内联 SVG 或 base64 编码的 PNG - 标题层级必须严格：
<h1></h1>是姓名，<h2></h2>是“教育背景”“工作经历”，不能跳级或混用<div> 模拟标题 <li>时间字段统一格式：<code>2022.09–2026.06比Sep 2022 – Jun 2026更容易被中文 ATS 识别 - 技能列表避免“精通/熟悉/了解”这类主观词，改用“Vue 3（3年项目经验）”“Git（日常协作）”等带上下文的写法
- 所有链接（GitHub、作品集）用完整
https://开头，别用github.com/xxx—— ATS 不会自动补协议
别碰 float 或 position: absolute —— 打印时内容大概率漂移或消失。
导出 PDF 前必须验证的三件事
Chrome “打印为 PDF” 看似简单，但中文简历最容易在三个环节翻车：
导出前务必在 Chrome 打印预览中逐页检查，别信“看起来差不多”——HR 打印出来就是最终效果。
ATS 友好 ≠ 放弃设计，而是选对标签和关键词
很多求职者以为“ATS 友好”就得写成纯文本，其实只要结构干净、关键词自然嵌入，照样能兼顾机器识别和视觉表达。
关键控制点：
最后提醒：简历页面必须有 <meta name="viewport" content="width=device-width, initial-scale=1">，否则哪怕你用了 flex，iPhone 上打开也是缩略图，连字号都看不清。
