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