table不适合做简历主体结构，因其本质用于二维数据而简历是线性叙事，易导致语义混乱、响应式失效、HR系统解析错误及打印错位；仅建议在课程成绩单等真正需表格语义的场景中使用。
用 table 做简历，不是不能用，而是容易踩坑——结构僵硬、语义混乱、响应式失效、打印错位，尤其在现代浏览器和 HR 的招聘系统里，table 会暴露语义缺陷（比如屏幕阅读器把“姓名”当成表格数据而非标题）。
为什么 table 不再适合做简历主体结构
HTML 表格本质是用于二维关系数据（如成绩表、航班时刻表），而简历是线性叙事内容：个人信息→教育→经历→技能。强行用 tr/td 拼凑会导致：
-
rowspan和colspan一多，后期改字段就得重算合并数，极易错位 - 手机端无法自然换行，
width="55%"这类写死值会让内容横向溢出或挤压变形 - HR 系统（如 Moka、北森）常通过语义标签解析简历，
table里的td内容会被识别为“无结构纯文本”，关键信息（如“2022.09–2026.06 清华大学”）可能被切碎丢弃 - 打印时边框线、单元格间距不可控，PDF 导出后常出现断行、空白页
table 只该用在真正需要表格语义的地方
如果你非要用 table，只建议它出现在以下明确场景，且必须配合语义化包裹：
- 课程成绩单：用
<table><thead><th>课程</th><th>成绩</th></thead><tbody>.../table> - 技能熟练度对比：比如“HTML/CSS/JS”三列，每行填“精通/熟悉/了解”，此时
table是合理语义 - 时间轴式经历：用
table列出“起止时间｜公司｜职位｜职责”，但需加role="grid"提升可访问性 - 照片区域：可用
td rowspan="4"固定头像位置，但必须设vertical-align: top防止文字上浮
替代方案：用语义标签 + CSS 实现模块化排版
真正模块化不是靠 table 拆格子，而是靠 HTML5 标签定义区块边界，再用 CSS 控制流式布局：
立即学习“前端免费学习笔记（深入）”；
- 用
<section id="education">包教育背景，<section id="experience">包工作经历——每个section可独立增删、CSS 可单独控制 margin/padding - 用
<dl><dt>学校</dt><dd>XX大学</dd><dt>专业</dt><dd>计算机科学</dd></dl>替代“左标签右内容”的table行，语义清晰且天然支持响应式换行 - 横向两栏布局（如左侧个人信息+右侧技能）用
display: grid或flex，而非table的colspan强撑 - 照片插入统一用
<figure><img src="..." alt="证件照"><figcaption>张三｜前端工程师</figcaption></figure>，比td rowspan更易维护
最后提醒：所有简历页面都必须加 <meta name="viewport" content="width=device-width, initial-scale=1">，否则哪怕你用了 flex，在 iPhone 上照样缩成一团看不清。表格不是原罪，错的是把它当万能布局工具——简历的本质是信息传达，不是像素对齐。
