<table>不适合简历页面，因其语义错误、打印错乱、ATS无法解析且响应式成本高；简历是线性文档，应使用<section>+<dl>+<time>等语义化标签替代。
别用 <table> 做简历页面——它语义错误、打印错乱、ATS（招聘系统）几乎无法解析，且响应式适配成本高到不值得。
为什么 <table> 不适合简历展示
表格标签的本意是表达「二维关系数据」，比如成绩表、航班时刻、库存清单。而简历是线性文档：时间顺序的工作经历、并列的技能类别、嵌套的教育条目——这些都不是行列对齐的结构化数据。
常见后果包括：
- 屏幕阅读器把“姓名”读成“第一行第一列”，失去上下文
-
colspan/rowspan一多，打印时内容被截断或错位 - 移动端强行缩放表格，文字挤成一团，用户得左右滑动才能看全一行
- GitHub Pages 或 Vercel 部署后路径出错，因为表格里常混着
../img/photo.jpg这类脆弱相对路径
<section> + <dl> + <time> 才是简历正解
用语义化标签替代表格，不是为了“炫技”，而是让浏览器、打印机、ATS 系统和你未来自己都看得懂结构。
立即学习“前端免费学习笔记（深入）”；
关键替换对照：
- “个人信息栏” →
<header>或<section>包裹<address>（专用于联系信息） - “技能：前端 / 后端 / 设计” →
<dl><dt>前端</dt><dd>HTML/CSS/React</dd></dl></li> <li>“2020–2023” → <code><time datetime="2020-01">2020–2023</time></li> <li>每段工作经历 → 独立 <code><article>
或带aria-labelledby的<section>，避免用<div class="job">
这样写，print 媒体查询能精准隐藏导航按钮，CSS 用 display: flex 控制两栏技能展示也更可控。
真要硬用表格？只限这一个场景
唯一合理使用 <table> 的地方：证书列表（如 PMP、AWS Certified）需要并列显示「证书名称｜颁发机构｜有效期」三列，且你确认不走 ATS 投递（比如直接发给熟人 HR）。
此时必须遵守：
- 加
<thead>和<tbody>，不能只有<tr><td> - 表头用
<th scope="col">，明确列含义 - 禁用
border="1"、cellpadding等过时属性，全用 CSS 控制 - 加
@media print { table { width: 100% !important; } }防止打印时溢出
最易被忽略的点：很多人花两小时调表格边框，却忘了 <time> 标签的 datetime 属性——它不改变视觉，但决定了你的简历能否被招聘系统的结构化解析器识别为有效时间字段。
