不建议用排版相册，因其破坏语义、阻碍响应式、增加改版成本；相册应使用+CSS Grid实现语义清晰、自适应、可访问的视觉卡片流。
不建议用 <table> 排版相册——它会破坏语义、卡死响应式、后期改版成本高，除非你明确需要表格的行列语义（比如“作品名｜拍摄时间｜地点｜设备”这类元数据表）。
<h3>为什么 <code><table> 不适合相册布局
<p>相册本质是「视觉卡片流」，而 <code><table> 的设计目标是结构化二维数据。强行塞图进去会触发一系列隐性问题：
<ul><li><code><table> 默认按内容撑宽，<code>width: 100% 或百分比列宽常失效，小屏下图文错位
gap 控制卡片间距，只能靠 padding + border-collapse 折腾vertical-align 和图片基线对齐导致空白难以消除，flex 覆盖又增加冗余样式<figure></figure> + <figcaption></figcaption> 才是正确语义<figure></figure> 中的 alt 和文字说明如果非要用 <table> 展示带元信息的图集
<p>仅限于每张图附带固定字段（如标题、时间、分类）且需横向对比的场景，例如摄影比赛评分表或项目截图对照表。此时必须遵守以下规则：</p>
<ul><li>用 <code><thead> 包裹 <code><th> 列头，确保语义可读
<li>每张图单独放在一个 <code><td> 内，外层不套 <code><div>，避免嵌套干扰表格渲染
<li>
<code><img alt="如何利用HTML表格排版展示相册" > 必须设 width: 100% + height: auto，禁用固定 height
<td> 加 <code>padding（如 12px），否则内部 gap 或 margin 会被压缩归零
<td> 上写 <code>width 百分比——浏览器优先按图片原始尺寸撑开列宽
真正该用什么替代 <table> 做相册
<p>用 <code><figure></figure> + CSS Grid，三行代码就能跑通所有设备：
立即学习“前端免费学习笔记（深入）”；
<section style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) ); gap: 24px;">
<figure>
<img src="./photos/01.jpg" alt="黄山云海，2023年6月" loading="lazy">
<figcaption><strong>黄山云海</strong>｜Canon EOS R5｜f/8</figcaption>
</figure>
<figure>
<img src="./photos/02.jpg" alt="苏州平江路晨光" loading="lazy">
<figcaption><strong>平江路晨光</strong>｜iPhone 14 Pro｜24mm</figcaption>
</figure>
</section>
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))自动适配列数，手机上一列、桌面四列 -
<figure></figure>天然语义正确，<figcaption></figcaption>可被搜索引擎索引 -
loading="lazy"防止首屏卡顿，alt必填（空字符串仅用于纯装饰图） - 路径用相对路径（如
./photos/01.jpg），避免部署后 404
表格不是不能放图，而是它根本不该承担“相册”这个角色。真正难的不是让图片排成网格，而是让它们在不同设备上保持比例、加载可控、语义清晰——这些点，<table> 从底层逻辑上就做不到。</table>
