在HTML表格单元格中直接插入<img>标签是标准且唯一方式，需正确设置src、alt，用CSS控制尺寸与对齐，避免布局错乱。
表格单元格里直接放 <img> 标签就行
HTML 表格本身不提供“插入图片”的专用语法，<img> 就是标准且唯一的方式。只要把 <img> 放在 <td> 或 <th> 里，浏览器就会渲染出来——不需要额外 wrapper、不用 JS、也不依赖 CSS（基础显示层面）。
常见错误是试图用 background-image 或把图片塞进 <div> 再嵌套，纯属绕路。表格单元格默认支持内联内容，<img> 天然符合这一规则。
-
src必须写对路径，相对路径以 HTML 文件所在位置为基准，不是以 CSS 或 JS 文件为准 - 建议始终加上
alt属性，既利于可访问性，也能在图片加载失败时显示替代文字 - 如果图片尺寸远大于单元格，默认会撑开表格，此时需用 CSS 控制（见下一条）
图片撑大单元格？用 CSS 限制尺寸最稳妥
原生 <img> 在 <td> 中默认按原始宽高显示，容易破坏表格布局。不能靠 width/height 属性硬设（已废弃且响应性差），应使用 CSS：
- 给
<img>加max-width: 100%+height: auto，确保不溢出单元格又保持比例 - 若需统一尺寸（比如头像列），可设固定
width和height，并配合object-fit: cover避免拉伸变形 - 避免只设
width不设height，否则可能因异步加载导致表格重排（FOUC）
示例：
<td><img src="avatar.jpg" alt="用户头像" style="max-width: 100%; height: auto;"></td>
立即学习“前端免费学习笔记（深入）”；
图文混排时文字对齐总不对？关键看 vertical-align
<img> 默认基线对齐（baseline），和文字底部留空隙，看起来像“悬浮”或“下沉”。这不是 bug，是行内元素的默认行为。
- 最常用解法：给
<img>加vertical-align: middle，视觉上居中对齐文字 - 若要顶部对齐，用
vertical-align: top；严格对齐文字底部则用vertical-align: bottom - 注意：
vertical-align只对行内级元素生效，别误加给<td> - 如果单元格里还有其他行内元素（如图标+文字+图片），统一设
vertical-align才能对齐
响应式表格里图片错位？别让表格自己决定宽度
在小屏设备上，<table> 容易横向溢出。此时单靠限制 <img> 尺寸不够，因为表格列宽可能仍由内容（包括图片原始尺寸）撑开。
- 给
<table>加table-layout: fixed，再配合width和列宽定义（如<col width="100">），才能真正控住列宽 - 避免在
<td>上用width属性（HTML 属性已过时），改用 CSSmin-width/max-width - 移动端优先场景下，考虑用
@media把图片设为display: block; margin: 0 auto;居中，而非强求表格内混排
真正麻烦的从来不是插图本身，而是表格容器、图片尺寸、文字基线、响应断点这四者之间的连锁反应——调一个参数常牵出另三个问题。
