应避免用做简历布局，因其会导致ATS解析失败、屏幕阅读器误读、打印错位及移动端失效；仅证书列表和技能对比等具行列关系的数据才适用，其余模块须改用语义化HTML+CSS Grid。
别用 <table> 做简历布局——它不是“不能实现”，而是会直接导致 ATS 无法解析、屏幕阅读器误读、打印错位、移动端完全失效。真正该做的，是把表格只留给真正有行列关系的数据。
<h3>为什么 <code><table> 一用就出问题
<p>浏览器和招聘系统（ATS）看到 <code><table>，默认这是二维数据表：比如课程表、库存清单。你把“姓名”“电话”“邮箱”塞进同一行的 <code><td>，等于告诉系统：“这三列是并列字段”，结果 ATS 提取时变成乱序字段，甚至漏掉关键信息。
<ul>
<li>打印预览里内容被截断，常见于 <code>colspan 或 rowspan 过多
<table> 默认不换行、不压缩
<li>
<code>border="1"、cellpadding 等属性在 Gmail、ATS、PDF 导出中基本被忽略或重置<table> 里再套 <code><table>）会让辅助技术彻底丢失语义层级
<h3>哪些地方真该用 <code><table>？只限两类
<p>只有当内容天然具备「列定义 + 多行数据」时，<code><table> 才合理且必要：
<ul>
<li>
<strong>证书列表</strong>：如 <code><th scope="col">证书名称</th>
<th scope="col">颁发机构</th>
<th scope="col">有效期</th>
<thead> 和 <code><tbody>
<p>其他所有模块——个人信息、教育背景、工作经历、自我介绍——全部改用 <code><section></section> + <h2></h2> + <p></p> 或 <dl></dl>。
立即学习“前端免费学习笔记（深入）”；
替代方案：用 CSS Grid 实现视觉分区
想左边放联系方式、右边放工作经历？不用表格，用现代布局：
- 外层容器设
display: grid，例如grid-template-columns: 280px 1fr - 每个逻辑块用
<section class="contact"></section>、<section class="experience"></section>包裹 - 小屏堆叠只需加一句：
@media (max-width: 768px) { grid-template-columns: 1fr; } - 日期统一用
<time datetime="2022-06">2022.06–至今</time>，ATS 才能结构化解析
如果硬要交一个表格版简历（比如内部系统要求）
务必满足这四点，否则连基础可用性都保不住：
- 所有样式必须内联，禁用
flex、grid、float—— ATS 和邮件客户端不认 <th> 必须带 <code>scope="col"，不能只写<th>公司</th>- 单元格垂直对齐写死：
style="vertical-align: top; line-height: 1.5;" - 导出 PDF 前，在 Chrome 打印预览中逐列检查是否错位；错位大概率是
<thead> 列数 ≠ <code><tbody> 每行 <code><td> 数 <p>最易被忽略的细节：没加 <code>datetime属性的<time></time>标签，和纯文本没区别——ATS 不会把它识别为时间字段。
