用<tr>做导航条行不通，因为<tr>必须嵌套在<table>中且单元格需用<td>/<th>包裹，直接写<tr><a>会因HTML不合法被浏览器修正或渲染错乱；display: table-row也无法正常撑宽、设置内边距或hover效果；正确做法是用<nav>配合flex或inline-block布局。

用 <tr> 做导航条，为什么行不通？

直接用 <tr>（表格行）排列链接做导航条，浏览器会强制套上表格上下文：单元格必须在 <td> 或 <th> 里，否则 HTML 不合法；即使强行写成 <tr><a>首页</a></tr>，解析后也会被自动修正或渲染错乱，根本无法点击。

常见错误现象：display: table-row 伪装成 <tr> 也撑不开父容器宽度，链接默认不换行、无内边距、hover 无效——本质是脱离了语义与样式协同机制。

真正能用的替代方案：语义化 + CSS 布局

导航条需要的是可访问性、响应式和样式控制，不是表格结构。把链接放进 <nav>，用 display: flex 或 display: inline-block 排列更可靠：

• <nav><a href="/">首页</a><a href="/about">关于</a></nav>
• 配合 CSS：nav { display: flex; gap: 1rem; } 或 a { display: inline-block; padding: 0.5rem 1rem; }
• 避免用 <table> 包裹导航——屏幕阅读器会读成“一行两列的表格”，干扰用户理解

如果非要用表格结构（极少数遗留系统）

仅当后端模板受限、必须输出 <table> 时才考虑，但必须补全合法嵌套：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

立即学习“前端免费学习笔记（深入）”；

• 必须有 <table>、<tbody>、<tr>、<td> 四层标签
• 每个链接需包在 <td> 里：<td><a href="/">首页</a></td>
• 移除所有表格默认边框/间距：table, td { border: none; padding: 0; margin: 0; }
• 性能隐患：表格渲染比块级元素慢，且无法用 Flex/Grid 做响应式断点

移动端适配时 <tr> 更不适用

表格行无法自然折行，flex-wrap: wrap 在 <tr> 上无效；而真实导航常需 hamburger 菜单或垂直堆叠，这些都依赖语义容器和现代布局模型。

容易被忽略的一点：用 <tr> 做导航，JavaScript 操作 document.querySelectorAll('nav a') 会失效——因为链接实际在 <td> 里，选择器得写成 'table td a'，耦合度陡增。