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