正确做法是在<td>内直接嵌套<a>标签，无需额外容器或JS；若需整格点击，用CSS设display:block并撑满；多链接用flex布局；开新页必须加rel="noopener noreferrer"。
直接在 <td> 里写 <a> 就行
HTML 表格单元格本身不设限，<td> 是容器，允许嵌套任意内联元素。<a> 就是标准内联标签，直接放进去就能用，不需要包裹 <div>、不用改表格结构、也不用 JS 注入。
常见错误是把 <a> 写在 <td> 外面，比如：<tr><a href="..."><td>文本</td></a></tr>——这会破坏 HTML 语义，浏览器可能自动修正或渲染错位。
- ✅ 正确写法：
<td><a href="/user/123">查看详情</a></td> - ✅ 多个链接并列：
<td><a href="/edit/123">编辑</a> | <a href="/delete/123">删除</a></td> - ✅ 带样式或图标：
<td><a href="/log?id=123"><strong>日志</strong></a></td>（<strong>可以，<div>不行）
想点整格都跳转？用 CSS 把 <a> 拉满
<a> 默认是内联元素，只响应文字区域点击。要实现“点单元格任意位置都跳”，得让它撑满整个 <td>。
关键不是改 HTML 结构，而是加两行 CSS：
立即学习“前端免费学习笔记（深入）”；
td a {
display: block;
width: 100%;
height: 100%;
padding: 8px; /* 可选，避免贴边难点击 */
}- 必须设
display: block，否则width/height无效 - 如果
<td>有padding，<a>的padding要匹配，不然留白区域点不动 - 不要用
position: absolute覆盖——容易遮挡其他内容，且响应式下易错位
多个链接共存时，注意空格和换行带来的空白
HTML 会把标签间的换行和空格渲染成一个空格符，导致链接之间出现意外间隙，比如「编辑 | 删除」中间多出两个空格。
- 写在一行：
<td><a>编辑</a>|<a>删除</a></td>（紧凑但难维护） - 用注释消除空白：
<td><a>编辑</a><!-- -->|<!-- --><a>删除</a></td> - 更推荐用 Flex 布局控制间距：
td { display: flex; gap: 8px; }，然后每个<a>单独写
另外，<a> 里嵌 <img> 时，记得加 vertical-align: middle，否则图文基线不对齐。
target="_blank" 必须配 rel="noopener noreferrer"
表格里开新页的链接（比如操作列中的「查看报表」），加 target="_blank" 很常见，但漏掉 rel 属性会有安全风险：新开页可通过 window.opener 访问原页面 DOM。
- ❌ 错误：
<a href="report.html" target="_blank">报表</a> - ✅ 正确：
<a href="report.html" target="_blank" rel="noopener noreferrer">报表</a> - 如果链接目标是同域内部页（如
/admin/log），其实没必要开新页，反而影响用户返回体验
表格场景下最容易被忽略的是：整格可点 + 新窗口 + 安全属性，三者要同时满足，缺一不可。
