如何在HTML表格<td>标签内嵌入网页并固定在指定区域显示

DevOps 小满

2026-10-5

问题原因

你当前a标签的target属性为空，默认跳转行为是在当前整个窗口加载UserLogon.html，所以会覆盖整个Top.html页面，而非仅在指定区域显示。

解决方案

步骤1：在第三个中添加iframe容器

你需要在第三个内预留一个iframe作为登录页的加载容器，修改Top.html对应的代码如下：

<td bgcolor="white" style="width: 500px; text-align: center">
  <p>
    <!-- 将target值设置为和下方iframe的name属性一致 -->
    <a href="./Forms/Pages/userLogonForm.html" target="logon_frame">
      User <br />
      Logon
    </a>
  </p>
  <!-- 新增iframe作为登录页的专属加载容器 -->
  <iframe name="logon_frame" width="100%" height="200" frameborder="0"></iframe>
</td>

点击链接后登录页只会在这个iframe内部加载，不会跳转整页，iframe的宽高可以根据你第三个的实际尺寸自行调整。

可选优化：点击后再显示iframe

如果不希望初始状态下显示空白iframe，可以加简单的控制逻辑：

<td bgcolor="white" style="width: 500px; text-align: center">
  <p>
    <a href="./Forms/Pages/userLogonForm.html" target="logon_frame" onclick="document.getElementById('logon_frame').style.display='block'">
      User <br />
      Logon
    </a>
  </p>
  <iframe id="logon_frame" name="logon_frame" width="100%" height="200" frameborder="0" style="display:none"></iframe>
</td>