用做垂直导航栏是反模式，因其语义错误、损害可访问性、破坏响应式且SEO不利；应改用结构配合flex-column等现代CSS实现。
直接说结论：用 <tr> 做垂直导航栏是反模式，HTML 表格不是为导航设计的，强行用 <code><tr> 堆链接会导致语义错误、可访问性崩溃、响应式失效，且现代 CSS 有更简单可靠的方案。
<h3>为什么 <code><tr> 不该用来排列导航链接
<p>表格行 <code><tr> 的语义是“数据行”，浏览器和读屏软件会将其理解为结构化数据的一部分。把导航项塞进 <code><tr> 里，等于告诉辅助技术“这是表格中的一行数值”，而非“这是网站主菜单”。实际中常见问题包括：
<ul>
<li>屏幕阅读器按表格模式朗读（如“第1行，共5行”，再逐单元格读），打断导航流</li>
<li>CSS 重置困难：<code>display: table-row 无法像 flex 或 block 那样自由控制间距、悬停、焦点样式
<tr> 默认不换行，可能横向溢出或强制缩小字体
<li>SEO 工具可能忽略表格内的链接权重，或误判页面结构</li>
<h3>真正该用的 HTML 结构：语义化 + 纯 CSS 布局</h3>
<p>垂直导航的本质是“一组带链接的块级项目”，对应标准语义是 <code><nav></nav> 包裹 <ul></ul>，每个链接用 <a></a> 放在 <li> 里。垂直排列靠 CSS 实现，不依赖表格标签：
<nav aria-label="主菜单">
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
然后加几行 CSS 就能实现干净垂直布局：
立即学习“前端免费学习笔记（深入）”；
- 用
flex-direction: column让<ul></ul>子项竖排 - 用
display: block和width: 100%确保<a></a>占满整行，点击热区更大 - 移除默认列表符号：
list-style: none - 避免悬停/焦点样式被忽略：务必加
outline或box-shadow（尤其对键盘用户）
如果非要兼容老系统（比如 IE8），怎么安全降级？
极少数遗留场景要求支持 IE8 且不能用 JS，此时也不能退回到 <table> —— 而应改用最简 CSS：
<ul>
<li>给 <code><ul></ul> 设 margin: 0; padding: 0
<li> 设 display: block
<a></a> 设 display: block; padding: 8px 12px（确保可点击区域足够）text-decoration: none，但保留颜色对比度 ≥ 4.5:1nav，可用 <div class="nav"> 替代，并补上 ARIA：<code>role="navigation"
真正麻烦的从来不是“怎么让链接竖着排”，而是让它们被正确识别、可操作、可缩放、可聚焦。表格标签在这条链路上每一步都在倒退。
