不推荐用 <table> 做导航栏，因其语义错误（导航非表格数据）、可访问性差（屏幕阅读器误读为行数据）、维护困难；应改用语义化 <nav> + <ul> 结构，配合 CSS 实现垂直布局与响应式交互。
用 <table> 做导航栏本身就是个危险信号
不推荐用 <table> 实现导航栏，哪怕只是想让链接垂直排列。语义上，导航是页面结构的一部分，不是数据表格；可访问性上，屏幕阅读器会把 <tr> 当作行数据处理，导致“首页、关于、联系”被读成“一行包含三个单元格”，而非“三个独立导航项”；维护上，加 hover 效果、响应式折叠、焦点管理都会比标准方案更绕。
<tr> 垂直排列链接？别硬套表格逻辑
如果非要用 <table>（比如遗留系统受限），想让每个 <a> 占一行，本质是让每个链接独占一个 <tr>，而不是塞进同一行的多个 <td>：
<table> <tr><td><a href="/">首页</a></td></tr> <tr><td><a href="/about">关于</a></td></tr> <tr><td><a href="/contact">联系</a></td></tr> </table>
- 每个
<tr>包一个<td>，自然垂直堆叠 - 必须显式清空默认边框和间距：
border="0" cellspacing="0" cellpadding="0"，否则会有讨厌的间隙和边线 -
<td>默认是display: table-cell，垂直对齐受vertical-align影响，若文字上下偏移，要设vertical-align: top
真正该用什么替代 <table> 导航？
用语义化标签 + CSS 控制布局，既简洁又健壮：
<nav>
<ul style="list-style: none; margin: 0; padding: 0;">
<li style="margin-bottom: 0.5em;"><a href="/">首页</a></li>
<li style="margin-bottom: 0.5em;"><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
-
<nav>明确告诉浏览器这是导航区域，支持键盘聚焦、ARIA 自动识别 -
<ul>表达“一组相关链接”，比<div>更准确 - 纯 CSS 控制垂直流：靠
margin-bottom或flex-direction: column，无兼容性包袱 - 后续加下划线悬停、移动端汉堡菜单，都比表格方案少写 3 倍代码
如果必须兼容老 IE（IE8 及以下）怎么办？
老 IE 对 <nav> 和现代 display 值支持差，但也不必退回到 <table>：
立即学习“前端免费学习笔记（深入）”；
- 用
<div role="navigation">替代<nav>，保可访问性 - 垂直排列用
display: block强制链接换行，而非依赖 flex/grid - 避免
inline-block的空白符问题：把<li>标签写在同一行，或设font-size: 0在父容器再重置子元素字号 - 绝对不要为兼容老 IE 牺牲语义——表格导航在任何现代场景里都不是“权衡”，而是技术债
表格的 <tr> 是为行数据设计的，不是布局工具。哪怕只改一行 CSS，也比用错语义多出三处潜在故障点。
