表格仅适用于天然行列结构的作品信息展示，如作品名｜技术栈｜上线时间｜GitHub链接；其他场景应使用语义化标签（如<figure>）配合CSS Grid实现响应式卡片布局。
表格不是不能做作品集，但用错地方会卡死响应式、语义混乱、后期改版成本翻倍——除非你明确需要表格语义（比如作品元数据本身就是行列结构），否则别用 <table> 做布局。
什么时候该用表格展示作品？
只有当你的作品信息天然具备“行列+标题”结构时才适合：比如每行是「作品名｜技术栈｜上线时间｜GitHub链接」，列头分别是这些字段。这种场景下 <th> 能被读屏器识别，<td> 有明确归属，搜索引擎也能抓取结构化数据。
- ✅ 正确用法：作品列表带固定字段的对比表、参赛作品评分表、开源项目贡献统计
- ❌ 错误用法：把封面图+标题+简介硬塞进一个
<td>当卡片用 - ⚠️ 风险点：一旦加响应式断点（比如小屏堆叠），
<table>的display: block强制换行会让图文错位，且无法用gap控制间距
如果非要用表格实现单元格内图文混排
真要塞图和文字进同一个 <td>，别靠 float 或 inline-block —— 表格单元格默认 vertical-align: middle，但图片基线对齐仍会留白。直接用 display: flex 覆盖掉默认行为：
<td style="padding: 16px; width: 300px;">
<div style="display: flex; align-items: center; gap: 12px;">
<img src="project1.jpg" alt="项目截图" style="width: 80px; height: 60px; flex-shrink: 0;">
<div>
<h4 style="margin: 0 0 4px 0;">电商后台</h4>
<p style="margin: 0; font-size: 14px;">Vue3 + TypeScript</p>
</div>
</div>
</td>
- 必须给
<td>设padding，否则内部flex的gap会被压缩 -
flex-shrink: 0锁死图片尺寸，避免表格自动缩列时压扁图片 - 别在
<td>上写width百分比——表格渲染逻辑会优先按内容撑开，百分比常失效
替代方案：用语义化标签 + CSS Grid 更省心
作品集本质是「卡片流」，<figure> + <figcaption> 天然语义正确，配合 display: grid 可直接响应式换行：
立即学习“前端免费学习笔记（深入）”；
<section style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) ); gap: 24px;">
<figure>
<img src="proj1.jpg" alt="项目1截图" style="width: 100%; height: 160px; object-fit: cover;">
<figcaption><strong>物流调度系统</strong><br>React + Ant Design</figcaption>
</figure>
<figure>
<img src="proj2.jpg" alt="项目2截图" style="width: 100%; height: 160px; object-fit: cover;">
<figcaption><strong>CMS插件</strong><br>Node.js + MongoDB</figcaption>
</figure>
</section>
-
<figure>明确告诉浏览器这是独立内容单元，<figcaption>是它的标题/说明 -
object-fit: cover确保不同比例图片统一裁剪，不拉伸变形 -
minmax(280px, 1fr)让每张卡片最小 280px，超出就自动换行，比表格断点更自然
表格做作品集最大的坑不在代码怎么写，而在于后续加筛选、搜索、暗色模式时，你得重写整套 DOM 结构——因为表格的语义和布局强耦合。真要快速上线，用 <figure> + grid；非要交差用表格，至少让每一行数据可被机器读取，别只图视觉整齐。
