HTML表格不该用于简历布局，因其语义专指二维数据展示（如课程表、成绩单），强行用于分区会导致辅助技术误读、响应式失效、维护困难；真正需行列结构的内容（如技能熟练度、项目时间线）才应使用含<thead><th><tbody>的语义化<table>。
HTML 表格不适合做简历布局，强行用 <table> 划分区域会带来语义错误、响应式失效和维护困难——这不是“能不能做”的问题，而是“不该做”的问题。
为什么 <table> 不该用来做简历布局
表格标签的语义是“展示行列数据”，比如课程表、价格对比、成绩单。浏览器、屏幕阅读器、搜索引擎都按这个逻辑解析 <table>。把个人信息、教育经历、技能列表塞进 <tr>/<td> 里，相当于告诉辅助技术：“这是一张数据表”，结果读出来是“姓名列、电话列、邮箱列……”，完全破坏信息层级。
更实际的问题是：一旦加了 width、cellspacing 这类过时属性，或靠嵌套表格对齐内容，后续想适配手机就只能重写——因为 <table> 的渲染逻辑不支持 flex 或 grid 的流式行为。
用 <section> + display: grid 替代表格分区
真正需要的是视觉上的“区域划分”，比如左侧放联系方式、右侧放工作经历。现代方案是语义化结构 + CSS 布局：
立即学习“前端免费学习笔记（深入）”；
- 用
<section>包裹“联系信息”“教育背景”等逻辑块，每个<section>内部用<h2>和<p>组织内容 - 外层容器设
display: grid，用grid-template-columns: 250px 1fr实现左右分区（左窄右宽） - 想在小屏上堆叠？加一句
@media (max-width: 768px) { grid-template-columns: 1fr; }就自动切单列
示例片段：
<div class="resume">
<section class="contact">
<h2>联系方式</h2>
<p>邮箱：<a href="mailto:name@example.com">name@example.com</a></p>
</section>
<section class="experience">
<h2>工作经历</h2>
<p>2022.06–至今｜前端工程师｜某科技公司</p>
</section>
</div>
CSS 中控制分区即可，不用动 HTML 结构。
哪些地方真要用 <table>？只限于表格型数据
简历里唯一该用 <table> 的地方，是确有行列关系的内容，例如：
- 掌握的编程语言及熟练度（语言 | 熟练度 | 使用时长）
- 项目时间线（项目名 | 起止时间 | 角色）
- 证书列表（证书名称 | 颁发机构 | 获取时间）
这时必须包含 <thead>、<th>、<tbody>，确保表头可被读屏软件识别。别为了“看起来整齐”把技能标签也塞进表格——<ul> 或带 display: flex 的 <div> 更合适。
导出 PDF 时的常见坑
很多人用表格是为了方便打印成 PDF，但实际更可靠的方式是：
- 用 CSS 的
@media print单独优化打印样式（比如隐藏链接下划线、固定字体大小） - 避免用
position: absolute或负 margin 强行定位，打印引擎不认这些 - 如果必须导出 PDF，用浏览器“打印 → 保存为 PDF”，比任何基于表格的 hack 都稳定
真正麻烦的不是怎么排版，而是让每一块内容在语义、可访问性、响应式、打印输出四个维度上同时成立——表格布局从第一关就失败了。
