用做导航栏违反语义且不可访问，应使用结构配合css实现横向排列，否则会导致屏幕阅读器误读、seo识别困难、键盘导航混乱及wcag合规失败。
用 <tr> 做导航栏违反语义且不可访问
<p>直接把导航链接塞进 <code><tr> 里，看似能横向排开，但这是错的。HTML 表格元素（<code><table>、<code><tr>、<code><td>）只该用于展示二维数据，比如价格表、课程安排。用它做导航，屏幕阅读器会读成“表格，1行，3列”，用户完全不知道这是菜单；搜索引擎也难识别导航意图；键盘 Tab 流也会因表格结构变得混乱。
<h3>真正该用的标签是 <code><nav></nav> + <ul></ul> + <li>
语义正确、默认可访问、样式控制更直接。横向排列靠 CSS，不是靠表格行：
<nav><ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul></nav>
配合简单 CSS 即可水平排列：
-
ul设display: flex或list-style: none+display: inline-block -
a加text-decoration: none和适当 padding - 别忘了给
nav加role="navigation"（虽现代浏览器自动补，但稳妥起见）
如果硬要用 <tr>（不推荐，但 legacy 代码可能遇到）
<p>那至少得补救可访问性，否则等于埋雷：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>必须给外层 <code><table> 加 <code>role="navigation" 和 aria-label="主导航"
<td> 里的链接要加 <code>tabindex="0"（否则部分旧浏览器不聚焦）
border、cellspacing、cellpadding，否则视觉干扰严重flex 可直接用 flex-wrap 或媒体查询降级为垂直菜单<tr> 导航在真实项目中会触发哪些具体问题
<p>不是“不好看”那么简单，而是实际卡点：</p>
<ul>
<li>WCAG 2.1 会判为 <code>Failure of Success Criterion 1.3.1（信息关系未以编程方式表达）
<ul></ul> or <ol></ol>” 这条<tr> 渲染动态菜单时，key 容易错配（<code><tr> 不是合法的 <code><ul></ul> 子元素，React 会警告）
语义不是教条，是浏览器、辅助技术和开发者之间的契约。用 <tr> 做导航，相当于寄快递不写地址只画个格子——东西可能到，但谁也说不清怎么到的，出问题也没法追责。</tr>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
