表格不适用于图片画廊，因其语义错误（应展示数据而非内容流）、无法响应式断行、难以控制图片比例、交互扩展性差且损害SEO；现代方案应使用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))配合aspect-ratio和gap实现真正自适应布局。
别用表格实现画廊式布局——它在语义、响应性、可维护性和可访问性上全面失效，现代浏览器也不再鼓励这种写法。
为什么 <table> 不该用于图片画廊
表格标签的语义是“展示二维关系数据”，比如价格表、课程表、对比参数。图片画廊是内容流，不是数据矩阵。强行套用会带来一连串硬伤：
- 屏幕阅读器会逐行逐单元格播报，把 12 张图读成“第1行第1列，第1行第2列……”，完全破坏浏览逻辑
-
<tr>和<td>无法响应式断行：小屏下要么横向滚动，要么强制缩放导致图片糊或留白 - 每张图必须塞进固定
<td>，没法用aspect-ratio或object-fit统一控制比例，高度参差不齐时整行会被最高那张图撑开 - 加 hover 缩放、灯箱、过滤分类等交互时，JS 需绕过表格结构做大量 DOM 遍历，代码臃肿且易出错
- SEO 认为这是滥用标记，可能降低图片索引权重
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是真正能替代表格的写法
这行 CSS 就是现代画廊的“新表格”——它按需生成列数，不依赖 HTML 结构嵌套，且完全语义正确（用 <figure> 包图）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 小屏（如 iPhone SE）自动退为 1 列：
minmax(280px, 1fr)中 280px > 可用宽度 → 只渲染 1 轨道，占满容器 - 中屏（768px）自然铺开 2 列，每列约 360px；大屏（1200px+）可达 4–5 列，无须媒体查询
-
auto-fit丢弃空轨道，避免最后一行只有一张图却右侧大片空白（auto-fill会保留空槽位） - 配合
gap: clamp(0.5rem, 2vw, 1rem)，间距随视口缩放，小屏不压迫，大屏不稀疏
如果旧项目真有表格画廊，怎么安全迁移
不是重写 HTML，而是最小改动切换布局引擎：
立即学习“前端免费学习笔记（深入）”；
- 保留原有
<table>结构，但给它加display: grid和grid-template-columns，浏览器会忽略<tr><td>的表格行为，按 Grid 重新排布 - 关键补三处样式：
img { max-width: 100%; height: auto; }、外层容器设aspect-ratio: 4/3、父容器加gap - 删掉所有
border、cellpadding、cellspacing—— 它们和 Grid 冲突，且已过时 - 检查
<table>是否被设了width: 100%或max-width：Grid 计算依赖这个宽度，若被父级 flex 截断，列数会误判
真正难的不是写对那一行 repeat(auto-fit, ...)，而是确保每张图的外层容器不带 min-width: auto（flex 默认值）、不设死 width、不漏掉 aspect-ratio —— 这些细节一错，Grid 就“装作没看见”。
