不推荐用做左图右文排版，因其语义错误、响应差、维护难；必须使用时应通过table-layout: fixed、定义列宽、vertical-align: middle和line-height等css属性实现稳定对齐。
直接用 <table> 做「左图右文」排版，现在不推荐——语义错、响应差、维护难。但如果你受限于老系统、邮件模板或特定 CMS（比如某些微信公众号编辑器），必须用表格，那核心是控制两列宽度 + 对齐 + 垂直居中，而不是靠 <code>align 或 valign 硬凑。
为什么不能只靠 align="left" 和 valign="middle"
这些 HTML 属性在现代浏览器中已被废弃，且行为不可控：align 对 <table> 本身只影响它在页面中的浮动位置（如左贴边），不影响内部图文相对关系；<code>valign 在嵌套单元格或不同字体下常失效，尤其当图片高度 ≠ 文字行高时，文字会“悬空”或压底。
<table align="left"> 只让整张表左浮，和“左图右文”无关 <li><code><td valign="middle"> 在 Firefox/Chrome 中对多行文本垂直居中支持不稳定 <li>没设 <code>table-layout: fixed时，表格列宽由内容撑开，图片尺寸稍变就破坏布局
真正能稳住的两列表格结构
用两列 <col> 显式定义宽度，第一列固定图宽（如 120px），第二列用 auto 占剩余空间；再配合 vertical-align: middle（CSS 属性，非 HTML 属性）和 line-height 控制文字垂直居中。
| @@##@@ |
这里是说明文字，可以多行，会自动与图片中线对齐。 |
-
table-layout: fixed是关键：它让列宽按<col>定义生效，不受内容挤压 -
img加display: block防止底部默认留白（inline 元素基线对齐导致的空隙） -
line-height: 1.5比单纯vertical-align: middle更可靠——后者只对单行有效，多行需配合height或flex，而表格里没法加 flex
响应式退化处理（最小宽度 + 折叠逻辑）
纯表格无法像 CSS Grid/Flex 那样自然换行，所以要在小屏下主动折叠：用媒体查询把第二列表格列宽设为 100%，第一列隐藏或转为顶部显示。
@media (max-width: 480px) {
table.left-image-right-text {
width: 100%;
}
table.left-image-right-text col:first-child {
width: 100% !important;
}
table.left-image-right-text col:last-child {
width: 0;
}
table.left-image-right-text td:first-child {
text-align: center;
padding-bottom: 12px;
}
table.left-image-right-text td:last-child {
display: block;
}
}
- 别指望
display: block直接作用于<td>——它会被忽略，必须作用于父 <code><tr> 或外层容器 <li>更稳妥的做法是加 class（如 <code>class="left-image-right-text"），避免通配符污染其他表格 - 如果要兼容 Outlook（桌面版），得额外加
width="100%"到<table> 标签里，因为它的渲染引擎不认 CSS 媒体查询 <p>表格做左图右文，本质是妥协方案。真正要注意的不是怎么写对，而是什么时候该停——比如当需要 hover 效果、动画、或图文间距随字号缩放时，表格立刻崩盘。这时候硬改不如换容器。</p> <img src="icon.png" alt="" style="max-width:90%" style="max-width:90%" style="display: block;"> </table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
