正确结构是<td><img src="yyy" alt="zzz"></td>，需严格嵌套、闭合；支持视频/GIF/文字混合但须注意MIME类型与fallback；富媒体布局依赖CSS而非colspan/rowspan；可访问性要求alt、headers、aria-label等必备属性。
直接在 <td> 里嵌套 <a> 和 <img> 就行，但顺序和闭合必须严格
很多人卡在“图片不显示”或“链接点不动”，其实只是标签嵌套错了。正确的结构是：<td><a href="xxx"><img src="yyy" alt="zzz"></a></td>。不能把 <a> 放在 <td> 外面，也不能漏掉任意一个结束标签。
常见错误现象：
-
<td><img></a></td>——<a>开头丢了，浏览器会自动补全但行为不可控 -
<a><td><img></td></a>——<a>包裹整个<td>，语义错误且部分浏览器不渲染点击区域 -
<td><a href="..."><img src="..."></td></a>—— 结束标签错位，</td>提前关闭，后续内容被挤出表格结构
<td> 支持视频、GIF、文字混合，但需注意 MIME 类型与 fallback
你可以在一个 <td> 里同时放 <img>、<video>、<p>，甚至 <div> 布局容器——只要它们是合法的 HTML 内容。但关键限制在于：浏览器对内联媒体的加载策略不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- MP4 视频必须用
<source>显式声明type="video/mp4"，否则 Safari 可能拒绝加载 - GIF 直接用
<img src="x.gif">即可，无需额外处理；但注意它本质是图像，不支持controls - 为所有
<img>和<video>加上alt或poster，否则无障碍阅读器无法识别内容意图 - 避免在
<td>中嵌套<table>—— 这会破坏表格语义，也容易引发 CSS 继承混乱
colspan 和 rowspan 影响富媒体布局，但别靠它们撑开尺寸
想让一张大图横跨两列？用 colspan="2" 没问题。但它只改变逻辑格子数量，不控制实际渲染宽高。很多开发者误以为加了 colspan 就能“自动拉伸图片”，结果发现图片还是被压缩在窄格子里。
真正起作用的是 CSS：
<td colspan="2"><img src="big.jpg" style="width:100%; height:auto;"></td>- 不要依赖
width/height属性（HTML5 已废弃），改用内联style或外部 class - 如果
<td>内容溢出，优先加overflow-x: auto到父<table>容器，而不是强行调rowspan -
rowspan在含视频的单元格中要格外小心：播放控件可能被下方行遮挡，建议配合z-index和position: relative
可访问性不是加分项，而是 <td> 含媒体时的硬性前提
屏幕阅读器不会自动告诉你“这个格子里有张带链接的猫图”。它只读 alt、title、aria-label，以及是否关联了表头。
必须检查的三点：
- 每个
<img>都有非空alt；纯装饰图用alt=""，别留空属性 - 如果表格有复杂结构（比如多级表头），给
<td>加headers="id1 id2"，指向对应<th id="id1"> -
<a>包裹媒体时，避免只写href="#"；要么指向真实地址，要么加role="button"+tabindex="0"并绑定键盘事件
最常被忽略的是：当 <td> 里塞了 <video>，却没提供字幕轨道（<track kind="subtitles">）或文字摘要。这对听障用户就是信息黑洞。
