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