<td> 是 phrasing content 容器，允许嵌套 <p>、<span>、<strong> 等标准文本标签；其默认样式（如 <th> 加粗居中）可被 CSS 覆盖，但需注意 <p> 自带 margin 会撑高行高，应重置为 margin: 0 或改用 display: block 元素。
HTML 里没有“表格文本标签”这个东西——<table> 本身不是文本标签，而是结构容器；单元格里的内容，用的是标准文本标签，比如 <p>、<span>、<strong>、<em>，甚至嵌套 <ul> 或 <a> 都合法。
为什么 <td> 里能放任意文本标签？
<td> 是 phrasing content 容器，浏览器允许它包含绝大多数内联元素和部分块级元素（如 <p>）。这意味着你不需要“特殊写法”，直接往里塞就行。
-
<td><p>第一段</p><p>第二段</p></td>合法，会渲染为带段间距的两段 -
<td><strong>加粗</strong> + <em>斜体</em></td>也完全没问题 - 甚至
<td><img src="x.jpg"></td>或<td><a href="#">链接</a></td>都是常规操作
<td> 和 <th> 对文本样式的影响
默认行为会影响你对文本的控制：
-
<th>会触发浏览器 UA 样式：font-weight: bold+text-align: center（注意：不是居中对齐整个单元格，而是文本居中） -
<td>默认text-align: left，且无加粗，但可被 CSS 覆盖 - 如果你在
<th>里写了<span>标题</span>，加粗依然生效；但若用了font-weight: normal，就抵消了
常见踩坑：嵌套 <p> 导致意外垂直间距
很多人在 <td> 里写 <p>内容</p> 后发现行高变大、上下留白多——这是因为 <p> 自带 margin（通常 1em），而表格单元格不会自动压缩它。
立即学习“前端免费学习笔记（深入）”；
- 解决方法一：CSS 重置
td p { margin: 0; } - 解决方法二：不用
<p>，改用<div>或<span>+display: block - 特别注意：
<td>内部不能嵌套<div>+display: table-cell，会破坏表格渲染流
语义化建议：什么时候该用 <thead> / <tbody> 包裹文本？
单纯为了“让文本更整齐”不用它们；但如果你的表格有明确表头+数据分离逻辑（比如后台列表、报表），就该用：
-
<thead>只放<tr><th>姓名</th><th>邮箱</th></tr>—— 这些文本代表列含义 -
<tbody>放所有<tr><td>张三</td><td>zhang@example.com</td></tr>—— 纯数据文本 - 好处：屏幕阅读器能识别结构；JS 操作时可精准选中数据区（如
document.querySelector('tbody tr')）
真正容易被忽略的是：表格单元格里的文本一旦嵌套了块级元素（尤其是 <p> 或 <div>），就可能影响 vertical-align 行为或导致高度计算异常——别只盯着内容是否显示，要检查实际渲染高度是否符合预期。
