HTML表格不适用于简历布局，因其缺乏语义性、影响无障碍访问、响应式与打印适配差；应改用语义化标签配合display: table等CSS实现灵活美观的简历。
HTML 表格本身不支持“精美”——它只是结构容器，所谓美观全靠 CSS 控制；直接用 <table> 写简历，若没配样式，结果一定是难看且不易维护的。
为什么不用 <table> 做简历布局
简历本质是语义化文档，不是二维数据集。用 <table> 强行套用会导致：
- 屏幕阅读器误读为数据表，影响无障碍访问
- 响应式断点难处理（比如手机端想改成纵向堆叠，
<tr><td>天然横向） - 打印时容易跨页截断在奇怪位置（
page-break-inside: avoid对<td>支持差） - 后期想加动画、悬停效果或深色模式适配，CSS 选择器写起来反人类
display: table 是更可控的替代方案
保留表格逻辑结构，但用语义正确的标签（<section>、<header> 等），再用 CSS 模拟表格行为。这样既可读又灵活：
<section class="resume-row"> <h3 class="resume-label">技能</h3> <div class="resume-value">React, TypeScript, PostgreSQL</div> </section>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.resume-row {
display: table;
width: 100%;
margin-bottom: 0.5em;
}
.resume-label {
display: table-cell;
width: 30%;
font-weight: bold;
padding-right: 1em;
}
.resume-value {
display: table-cell;
width: 70%;
}好处：
- 语义正确，SEO 和无障碍友好
- 手机端可直接改
display: block让 label/value 垂直排列 - 能用
@media print单独控制打印样式
真正让简历“精美”的三个 CSS 关键点
不是加阴影或渐变，而是这三处细节决定专业感：
-
行高与字重搭配：正文用
line-height: 1.5，标题用font-weight: 600，避免用bold（太粗易糊） -
间距系统统一：所有垂直间隔用
margin-bottom，且只设一种基础单位（如0.75rem），不要混用px/em/rem -
颜色仅用三种以内：主色（如
#2563eb）、中性灰（#4b5563）、背景白（#ffffff），避免简历像 PPT
最常被忽略的是打印适配：加一句 @media print { * { text-shadow: none !important; } 就能避免打印机把灰色文字印成模糊一片。
