不适合图片排版，因其语义错误、响应式难实现、维护成本高、可访问性差、性能低；仅限ie8或邮件模板等特殊场景，且需固定列宽、禁用height、清除边距。
别用 <table> 布局多图——它语义错误、响应式难做、维护成本高，现代项目里基本是退化方案，只在极少数必须兼容 IE8 或导出邮件模板等特殊场景才考虑。
<h3>为什么 <code><table> 不适合图片排版
<p>表格标签的本职是表达「行列关系的数据」，比如价格表、课程表。把图片塞进 <code><td> 里，浏览器和读屏软件会误以为你在展示结构化数据，影响可访问性；CSS 响应式控制也极其别扭：你得给每列写媒体查询、手动算 colspan、<code>width 百分比容易错位，小屏折行要靠 JS 或冗余 HTML 才能模拟。
- 常见错误现象：
<table> 宽度撑破容器、图片被拉伸变形、移动端无法自动换行、打印时错乱 <li>性能影响：表格渲染需等待整行内容加载完才绘制，比 Flex/Grid 的流式渲染慢</li> <li>维护陷阱：加一张图就得改 HTML 结构（比如从 2×2 改成 2×3），不能靠 CSS 自动适应</li> <h3>如果非要用 <code><table>，怎么最小化翻车 <p>仅限老旧系统迁移、邮件 HTML 或内网 IE8 环境。核心原则是：放弃响应式幻想，固定列数 + 强制约束尺寸。</p> <ul><li>用 <code><colgroup></colgroup>统一列宽，避免每张<td> 写 <code>width：<colgroup> <col width="200"> <col width="200"> </colgroup>
- 图片必须设
width: 100%; height: auto;，禁用height固定值（否则不同比例图会挤压变形） - 清除默认边框和间距：
border-collapse: collapse;+cellpadding="0" cellspacing="0" - 禁止文字环绕：给
<td> 加 <code>vertical-align: top;，否则基线对齐会导致底部留白真要兼容老环境，比
<table> 更靠谱的替代方案 <p>用语义正确、CSS 可控的方式降级，而不是硬套表格。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器"><img src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="overflowclass">HTML汇报生成器</a> <p class="overflowclass">🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p> </div> <a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>IE11 及以下：用 <code>display: flex+flex-wrap: wrap，配合font-size: 0清除 inline-block 间隙（不用 table） - 纯静态邮件模板：用
<div style="display:inline-block; width:200px; vertical-align:top"> 包裹每张图+文字，比 table 更轻量 <li>需要行列对齐但又不想用 grid：<code>display: inline-block+ 父容器text-align: justify+ 伪元素::after { content: ''; display: inline-block; width: 100%; }实现两端对齐
真正难处理的从来不是“怎么让图并排”，而是“怎么让它们在不同设备、不同图源比例、不同文字长度下都保持可用”。表格在这点上先天残疾，别把它当布局工具用。
