表格不适用于图片画廊，因其语义错误（应展示数据而非内容流）、无法响应式断行、难以控制图片比例、交互扩展性差且损害seo；现代方案应使用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))配合aspect-ratio和gap实现真正自适应布局。
别用表格实现画廊式布局——它在语义、响应性、可维护性和可访问性上全面失效，现代浏览器也不再鼓励这种写法。
为什么 <table> 不该用于图片画廊
<p>表格标签的语义是“展示二维关系数据”，比如价格表、课程表、对比参数。图片画廊是内容流，不是数据矩阵。强行套用会带来一连串硬伤：</p>
<ul>
<li>屏幕阅读器会逐行逐单元格播报，把 12 张图读成“第1行第1列，第1行第2列……”，完全破坏浏览逻辑</li>
<li><code><tr> 和 <code><td> 无法响应式断行：小屏下要么横向滚动，要么强制缩放导致图片糊或留白
<li>每张图必须塞进固定 <code><td>，没法用 <code>aspect-ratio 或 object-fit 统一控制比例，高度参差不齐时整行会被最高那张图撑开
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是真正能替代表格的写法
这行 CSS 就是现代画廊的“新表格”——它按需生成列数，不依赖 HTML 结构嵌套，且完全语义正确（用 <figure></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> 结构，但给它加 <code>display: grid和grid-template-columns，浏览器会忽略<tr><td> 的表格行为，按 Grid 重新排布 <li>关键补三处样式：<code>img { max-width: 100%; height: auto; }、外层容器设aspect-ratio: 4/3、父容器加gap - 删掉所有
border、cellpadding、cellspacing—— 它们和 Grid 冲突，且已过时 - 检查
<table> 是否被设了 <code>width: 100%或max-width：Grid 计算依赖这个宽度，若被父级 flex 截断，列数会误判真正难的不是写对那一行
repeat(auto-fit, ...)，而是确保每张图的外层容器不带min-width: auto（flex 默认值）、不设死width、不漏掉aspect-ratio—— 这些细节一错，Grid 就“装作没看见”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
