不推荐用<table>布局简历。它破坏语义化、损害可访问性、导致打印错行和移动端适配失败，且CSS维护复杂；仅在wkhtmltopdf导出且需像素对齐时，才限于纯文本字段的窄范围使用。
用 <table> 布局简历真的可行吗？
不推荐。现代简历 HTML 应该语义化、可访问、响应式，而 <table> 仅适合真正意义上的二维数据（如课程表、价格对比）。用 <tr> 和 <td> 强行划分“个人信息区”“工作经历区”，会导致屏幕阅读器误读为数据表格，打印时易错行，移动端几乎无法适配。
<tr> 和 <td> 在简历里容易引发什么问题？
常见错误现象包括：左右两栏内容在小屏上堆叠错乱、打印预览时右侧技能栏被截断、aria-label 无法合理标注“这其实是标题区块而非数据行”。更麻烦的是，CSS Grid 或 Flex 布局能一行代码实现的等高列，在表格里得靠 vertical-align + height + min-height 组合硬调，稍改内容就崩。
- 用
<td>包裹“教育背景”标题 → 屏幕阅读器读作“单元格，内容：教育背景”，丢失<h2>的层级语义 - 为对齐强行加空
<td>或<colspan>→ DOM 结构臃肿，不利于后期用 JS 动态增删条目 - 设
border-collapse: collapse后边框线干扰视觉留白 → 不得不额外写border: none覆盖，增加维护成本
如果非要兼容老系统或导出 PDF，怎么最小化用表格？
仅在导出场景（如通过 wkhtmltopdf 渲染）且明确要求“绝对像素对齐”时，才考虑窄范围使用 <table>。此时必须：
- 只用表格包裹纯文本块，例如把“公司名称｜职位｜时间”三字段塞进同一
<tr>，每项占一个<td>，不用表格模拟整体布局 - 禁用
<th>，全部用<td>并显式设scope="col"或scope="row"（否则 PDF 工具可能忽略表头逻辑） - 给
<table>加role="presentation"，向辅助技术声明“此表无数据含义” - 避免嵌套表格 —— 一旦出现
<table><tr><td><table>，wkhtmltopdf 渲染极易错位
替代方案：用语义标签+CSS 实现同样视觉效果
用 <section> 划分模块，<h2> 标记小标题，配合 display: grid 控制两栏布局，代码更短、可访问性更好、缩放时文字不会挤出容器：
立即学习“前端免费学习笔记（深入）”；
<section class="experience">
<h2>工作经历</h2>
<div class="timeline">
<div><strong>ABC 公司</strong>｜前端工程师</div>
<div>2021.03 – 2023.08</div>
</div>
</section>
对应 CSS 只需：
.timeline {
display: grid;
grid-template-columns: 1fr max-content;
gap: 0.5em;
}
真正难的不是写出来，是说服 HR 系统接受语义化 HTML——有些老旧 ATS 会把 <section> 当成普通段落丢弃，这时候反而要退回到带 role="region" 的 <div>，而不是跳回表格。
