<table> 不适合图片排版，因其语义错误、响应式难实现、维护成本高、可访问性差、性能低；仅限IE8或邮件模板等特殊场景，且需固定列宽、禁用height、清除边距。
别用 <table> 布局多图——它语义错误、响应式难做、维护成本高，现代项目里基本是退化方案，只在极少数必须兼容 IE8 或导出邮件模板等特殊场景才考虑。
为什么 <table> 不适合图片排版
表格标签的本职是表达「行列关系的数据」，比如价格表、课程表。把图片塞进 <td> 里，浏览器和读屏软件会误以为你在展示结构化数据，影响可访问性；CSS 响应式控制也极其别扭：你得给每列写媒体查询、手动算 colspan、width 百分比容易错位，小屏折行要靠 JS 或冗余 HTML 才能模拟。
- 常见错误现象：
<table>宽度撑破容器、图片被拉伸变形、移动端无法自动换行、打印时错乱 - 性能影响：表格渲染需等待整行内容加载完才绘制，比 Flex/Grid 的流式渲染慢
- 维护陷阱：加一张图就得改 HTML 结构（比如从 2×2 改成 2×3），不能靠 CSS 自动适应
如果非要用 <table>，怎么最小化翻车
仅限老旧系统迁移、邮件 HTML 或内网 IE8 环境。核心原则是：放弃响应式幻想，固定列数 + 强制约束尺寸。
- 用
<colgroup>统一列宽，避免每张<td>写width：<colgroup><col width="200"><col width="200"></colgroup>
- 图片必须设
width: 100%; height: auto;，禁用height固定值（否则不同比例图会挤压变形） - 清除默认边框和间距：
border-collapse: collapse;+cellpadding="0" cellspacing="0" - 禁止文字环绕：给
<td>加vertical-align: top;，否则基线对齐会导致底部留白
真要兼容老环境，比 <table> 更靠谱的替代方案
用语义正确、CSS 可控的方式降级，而不是硬套表格。
立即学习“前端免费学习笔记（深入）”；
- IE11 及以下：用
display: flex+flex-wrap: wrap，配合font-size: 0清除 inline-block 间隙（不用 table） - 纯静态邮件模板：用
<div style="display:inline-block; width:200px; vertical-align:top">包裹每张图+文字，比 table 更轻量 - 需要行列对齐但又不想用 grid：
display: inline-block+ 父容器text-align: justify+ 伪元素::after { content: ''; display: inline-block; width: 100%; }实现两端对齐
真正难处理的从来不是“怎么让图并排”，而是“怎么让它们在不同设备、不同图源比例、不同文字长度下都保持可用”。表格在这点上先天残疾，别把它当布局工具用。
