不能用做导航栏，因其语义仅为二维结构化数据，用于导航会导致读屏器误读、小屏渲染异常及DOM结构错乱；应使用display: grid配合实现语义清晰、响应式可控的导航布局。
别用 如果你需要的是“8 个导航项排成 4×2 网格”或“顶部主菜单 + 左侧快捷入口 + 底部工具组”这类明确区域划分， 固定行列数在小屏上必然拥挤，但不用删内容，只需重定义区域布局： 立即学习“前端免费学习笔记（深入）”； 真正难的不是让东西“排整齐”，而是让它们在键盘、触屏、读屏器、缩放、打印、SEO 所有上下文里都行为一致。用 <table> 做导航栏，无论它看起来多“整齐”——这不是布局问题，是语义和可访问性红线。
<h3>为什么 <code><table> 不能当导航网格用
<p>浏览器、读屏器、搜索引擎都靠标签语义理解页面结构。<code><table> 的唯一合法语义是“二维结构化数据”，比如销售报表或课程表。把它塞进导航场景，会直接触发三类硬伤：
<ul>
<li>屏幕阅读器把“首页 | 关于 | 联系”读成“第1行：首页、关于、联系”，用户无法快速跳转单个链接</li>
<li><code><tr> 强制单行渲染，小屏下不折行就横向滚动，加 <code>white-space: nowrap 只会让问题更糟
<table> 时，浏览器可能自动把子表移出 <code><td>，导致 JS 查不到节点、CSS 样式失效、打印预览空白
<h3>
<code>display: grid 实现真正可控的导航网格
display: grid 是唯一合理选择——它专为二维布局设计，且保留语义清晰性。<nav></nav> 包裹整个区域，内部用 <div> 或 <code><ul></ul> 分组，每组再用 grid-area 指定位置
#nav-grid { display: grid; grid-template-rows: 30% 30% 25% 15%; grid-template-columns: 1fr 1fr 1fr; }
<div class="quick-links">）设 <code>grid-area: 2 / 1 / 3 / 3，表示占第2行、从第1列到第3列
width: 100%; height: 100%，避免内容撑破网格单元移动端网格怎么不崩？关键在
grid-template-areas + 媒体查询
grid-template-areas: "main main main" "tools tools quick" "foot foot foot";
grid-template-areas: "main" "tools" "quick" "foot";，自动变单列流式grid-auto-flow: column——它不保证顺序，键盘 Tab 和读屏器顺序可能错乱grid-area 名称必须唯一，重复会导致部分区块被覆盖或丢失<table> 换来的那点视觉对齐，代价是后期补无障碍、调响应式、修 SEO 的三倍工时。</table>
