HTML简历不应使用表格，因其语义不清、响应式差、可访问性弱；应优先采用div+CSS Grid/Flex布局，仅在邮件内嵌等极少数场景下用table，且须严格遵循role="presentation"等可访问性规范。
HTML 表格不是现代简历的推荐载体——语义不清、响应式困难、屏幕阅读器支持差，且后期维护成本高。真正需要交付 HTML 简历时，应优先用 <div> + CSS Grid/Flex 布局；只有极少数场景（如邮件内嵌、老旧系统模板兼容）才需用 <table>，且必须严格遵循可访问性底线。
为什么 <table> 用在简历里容易出问题
表格本质是表达「二维关系数据」，比如课程表、价格对比、财务报表。而简历是线性结构化文档：姓名、联系方式、教育经历、项目经验——这些是逻辑层级关系，不是行列映射关系。强行套用 <table> 会导致：
-
role="presentation"必须显式添加，否则屏幕阅读器会逐行读“第1行第1列…”，完全破坏信息流 - 手机端横向滚动不可避免，
overflow-x: auto无法优雅解决布局断裂 - 打印时分页错乱，
<thead>在跨页时不会自动重复（除非加@media print特殊处理） - SEO 和语义化标签校验工具（如 axe）直接报
table-presentational错误
如果非要用 <table>，必须写的最小安全结构
仅当对接内部 HR 系统或遗留邮件模板时才考虑。核心原则：视觉是表格，语义不是表格。必须满足以下三点：
- 整个简历包裹在
<table role="presentation">中，且所有子<tr>/<td>不再有语义含义 - 关键内容（如姓名、职位）仍要用语义化标签：
<h1>、<h2>、<address>，不能只靠<td>的字体大小撑 - 联系方式部分必须用
<a href="tel:...">和<a href="mailto:...">，不能写纯文本
示例片段：
立即学习“前端免费学习笔记（深入）”；
<table role="presentation" cellpadding="0" cellspacing="0" style="width:100%; max-width:800px;">
<tr>
<td><h1>张三</h1><h2>前端开发工程师</h2></td>
</tr>
<tr>
<td>
<address>
<a href="tel:+8613800138000">+86 138-0013-8000</a>｜
<a href="mailto:zhangsan@example.com">zhangsan@example.com</a>
</address>
</td>
</tr>
</table>
<table> 简历里最容易被忽略的可访问性细节
即使加了 role="presentation"，仍可能被辅助技术误读。以下三项必须手动检查：
-
<caption>标签绝对不能出现——它会给表格赋予语义标题，与role="presentation"冲突 - 所有
<th>必须删掉，换成<td>；哪怕看起来像“栏目名”，也不能用<th>，否则会被读作“表头” - 避免嵌套表格；若真要实现两栏布局（如左栏技能、右栏项目），用单层
<table>+colspan/rowspan控制，不要<table> <table>
最后提醒：任何用 <table> 实现的简历，在 Chrome DevTools 的 Accessibility 面板中检查时，“AX Tree” 应完全不出现 table、row、cell 节点——只看到 document → heading → link → paragraph 这类语义节点，才算过关。
