不推荐用<table>做左图右文排版，因其语义错误、响应差、维护难；必须使用时应通过table-layout: fixed、<col>定义列宽、vertical-align: middle和line-height等CSS属性实现稳定对齐。
直接用 <table> 做「左图右文」排版，现在不推荐——语义错、响应差、维护难。但如果你受限于老系统、邮件模板或特定 CMS（比如某些微信公众号编辑器），必须用表格，那核心是控制两列宽度 + 对齐 + 垂直居中，而不是靠 align 或 valign 硬凑。
为什么不能只靠 align="left" 和 valign="middle"
这些 HTML 属性在现代浏览器中已被废弃，且行为不可控：align 对 <table> 本身只影响它在页面中的浮动位置（如左贴边），不影响内部图文相对关系；valign 在嵌套单元格或不同字体下常失效，尤其当图片高度 ≠ 文字行高时，文字会“悬空”或压底。
-
<table align="left">只让整张表左浮，和“左图右文”无关 -
<td valign="middle">在 Firefox/Chrome 中对多行文本垂直居中支持不稳定 - 没设
table-layout: fixed时，表格列宽由内容撑开，图片尺寸稍变就破坏布局
真正能稳住的两列表格结构
用两列 <col> 显式定义宽度，第一列固定图宽（如 120px），第二列用 auto 占剩余空间；再配合 vertical-align: middle（CSS 属性，非 HTML 属性）和 line-height 控制文字垂直居中。
<table style="table-layout: fixed; width: 100%; border-collapse: collapse;">
<col style="width: 120px;">
<col style="width: auto;">
<tr>
<td style="vertical-align: middle; padding-right: 16px;">
<img src="icon.png" alt="" width="100" height="100" style="display: block;">
</td>
<td style="vertical-align: middle; line-height: 1.5;">
<p>这里是说明文字，可以多行，会自动与图片中线对齐。</p>
</td>
</tr>
</table>
-
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>——它会被忽略，必须作用于父<tr>或外层容器 - 更稳妥的做法是加 class（如
class="left-image-right-text"），避免通配符污染其他表格 - 如果要兼容 Outlook（桌面版），得额外加
width="100%"到<table>标签里，因为它的渲染引擎不认 CSS 媒体查询
表格做左图右文，本质是妥协方案。真正要注意的不是怎么写对，而是什么时候该停——比如当需要 hover 效果、动画、或图文间距随字号缩放时，表格立刻崩盘。这时候硬改不如换容器。
