头像在中“飘着”是因为默认inline且vertical-align:baseline，预留descender空间导致底边悬空；解决需用css设置vertical-align:middle于自身，并配合max-width和height:auto保比例。
直接在 <td> 里放 <code><img> 就能显示头像，但默认对齐方式会让图片“悬空”，文字混排时底部留白——这不是 bug，是行内元素的基线对齐行为。
为什么头像总在单元格里“飘着”？
<img> 默认是 inline 元素，按文字基线（baseline）对齐，下方预留了字母 g、y 的下伸空间，所以看起来没贴底。加 valign="middle" 或 align="middle" 能临时缓解，但这些属性在 HTML5 中已废弃，且只作用于表格单元格，无法复用到其他场景。
- 现象：头像和旁边文字不对齐，尤其和中文文字并列时更明显
- 根本原因：
vertical-align: baseline是默认值，不是“居中” - 兼容性：
valign在现代浏览器仍有效，但 W3C 不再推荐，未来可能被移除
用 CSS 控制 <img> 在 <td> 中垂直居中
<p>给 <code><td> 或 <code><img> 加 class，用 vertical-align: middle 配合 line-height 或 display: table-cell 更可靠。优先推荐前者，轻量且语义清晰。
- 写法示例：
<td class="avatar-cell">@@##@@</td>
- CSS：
.avatar-cell img { vertical-align: middle; max-width: 48px; height: auto; }
- 关键点：
vertical-align 必须作用在 <img src="u1.jpg" alt="张三"> 上，而不是 <td>；<code>max-width 防撑破列宽，height: auto 保比例
- 别写
display: block —— 会丢失 inline 对齐能力，导致文字无法同行混排
头像尺寸统一与响应式处理
头像尺寸不一致会导致表格行高错乱，尤其多行数据时。靠 width/height 属性硬设像素值容易拉伸变形，且无法适配移动端。
- 错误做法：
<img> —— 忽略原始宽高比，小图放大模糊，大图压缩失真
- 正确思路：用
max-width + height: auto 限制最大尺寸，让浏览器自动缩放
- 进阶控制：加
object-fit: cover（需配合固定宽高容器），但 <td> 默认是内容自适应，慎用；更稳妥的是预处理头像为统一尺寸 PNG/JPEG
<li>移动端注意：如果表格本身没做响应式（如没加 <code>table-layout: fixed 或媒体查询），头像再小也救不了横向溢出
alt 属性不是可选项，而是必要字段
漏写 alt 不仅影响无障碍访问（屏幕阅读器无法描述图像），还会在路径错误或网络异常时留白，用户完全不知道该位置本应显示什么。
- 合格写法：
<img style="max-width:90%" style="max-width:90%" src="...">
- 避免空值：
alt="" 表示“纯装饰性图片”，但头像显然有语义，不能留空
- 别用文件名充数：
alt="avatar-23.png" 对用户毫无意义
- 构建流程中可考虑用脚本校验所有
<img src="avatar-23.png" alt="李四，前端工程师"> 是否含非空 alt，CI 阶段拦截
真正麻烦的不是怎么把图片塞进表格，而是当头像来自 API 动态渲染、尺寸不可控、甚至偶尔 404 时，如何让 <td> 保持稳定高度、文字不跳动、加载失败时有 fallback 文字——这些得靠 CSS 容器约束 + JS 错误监听协同解决，纯 HTML 搞不定。
<img>
</td>
<td class="avatar-cell">@@##@@</td>
.avatar-cell img { vertical-align: middle; max-width: 48px; height: auto; }
vertical-align 必须作用在 <img src="u1.jpg" alt="张三"> 上，而不是 <td>；<code>max-width 防撑破列宽，height: auto 保比例
display: block —— 会丢失 inline 对齐能力，导致文字无法同行混排头像尺寸统一与响应式处理
头像尺寸不一致会导致表格行高错乱，尤其多行数据时。靠 width/height 属性硬设像素值容易拉伸变形，且无法适配移动端。
- 错误做法：
<img>—— 忽略原始宽高比，小图放大模糊，大图压缩失真 - 正确思路：用
max-width+height: auto限制最大尺寸，让浏览器自动缩放 - 进阶控制：加
object-fit: cover（需配合固定宽高容器），但<td> 默认是内容自适应，慎用；更稳妥的是预处理头像为统一尺寸 PNG/JPEG <li>移动端注意：如果表格本身没做响应式（如没加 <code>table-layout: fixed或媒体查询），头像再小也救不了横向溢出 - 合格写法：
<img style="max-width:90%" style="max-width:90%" src="..."> - 避免空值：
alt=""表示“纯装饰性图片”，但头像显然有语义，不能留空 - 别用文件名充数：
alt="avatar-23.png"对用户毫无意义 - 构建流程中可考虑用脚本校验所有
<img src="avatar-23.png" alt="李四，前端工程师">是否含非空alt，CI 阶段拦截
alt 属性不是可选项，而是必要字段
漏写 alt 不仅影响无障碍访问（屏幕阅读器无法描述图像），还会在路径错误或网络异常时留白，用户完全不知道该位置本应显示什么。
真正麻烦的不是怎么把图片塞进表格，而是当头像来自 API 动态渲染、尺寸不可控、甚至偶尔 404 时，如何让 <td> 保持稳定高度、文字不跳动、加载失败时有 fallback 文字——这些得靠 CSS 容器约束 + JS 错误监听协同解决，纯 HTML 搞不定。
<img>
</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
