答案：用 vertical-align: top 直接设置 td/th 元素可实现单元格内容顶部对齐，需作用于单元格本身而非 table 或 tr，且在有固定高度或多行内容时效果明显；valign="top" 虽兼容但已过时，不推荐新项目使用。
用 vertical-align: top 控制单元格内容垂直对齐
HTML 表格默认是 vertical-align: middle，所以文字、数字或内联元素常“悬在中间”，尤其在设置了固定高度的 <td> 里，看起来像靠下。最直接有效的解法就是显式设置 <code>vertical-align: top。
这个 CSS 属性作用于 <td> 或 <code><th> 元素本身（不是父 <code><tr>），且必须配合有明确高度/行高的上下文才容易观察效果：
<ul><li>如果 <code><td> 没设高度，<code>vertical-align 仍生效，但视觉变化不明显——因为内容撑开单元格，顶部自然贴边
height（比如 height: 60px）或包含多行文本、<div> 等块级内容，<code>vertical-align: top 就能真正把内容“钉”在顶部
display: block 的容器无效（此时需改子容器自身样式）
valign="top" 还能用吗？兼容性怎么看
老式写法 <td valign="top"> 在 HTML5 中已被标记为「过时（obsolete）」，W3C 不再推荐使用。但它在所有现代浏览器（Chrome/Firefox/Safari/Edge）中依然能工作，包括 IE11 —— 所以如果你维护的是遗留系统或需要快速 patch，临时加 <code>valign 不会出错。
不过要注意两点：
- 它无法通过 CSS 覆盖（比如写了
td { vertical-align: bottom; }，valign="top"仍会赢），属于 HTML 属性优先级高于普通 CSS 规则 - 用它会让 HTML 更难维护、更难与 CSS-in-JS 或组件化方案集成，新项目建议统一走 CSS 路线
为什么有时候设了 vertical-align: top 还没效果
常见失效场景不是代码写错，而是被其他样式覆盖或误解了作用对象：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 写在
table或tr上：无效。vertical-align对<table> 和 <code><tr> 无意义，只对 <code><td>/<code><th> 生效 <li>子元素用了 <code>display: flex或display: grid：此时对齐逻辑由 Flex/Grid 容器控制，vertical-align不起作用，得改子容器内部的align-items - 单元格内只有单个块级元素（如
<p></p>），且该元素有margin-top：看起来没顶住，其实是p自身外边距在作祟，清掉margin或设margin-top: 0 - CSS 选择器权重不够：比如全局重置了
td { vertical-align: middle !important; }，你的规则就得加权或用!important（不推荐，应调整选择器 specificity）
表格标题（<caption></caption>）和单元格内容是两回事
别混淆 <caption></caption> 和单元格内容对齐：caption-side: top 控制的是整个表格标题的位置（在表上方/下方），和 <td> 内部文字是否靠上无关。如果你发现编号列的数字“沉底”，问题一定出在 <code><td> 的 <code>vertical-align，而不是 <caption></caption> 设置错了。
另外，如果单元格里放的是纯数字（比如规则序号），又用了 line-height，记得检查 line-height 是否过大导致视觉下沉——有时调小 line-height: 1.2 比死磕 vertical-align 更快见效。
