HTML表格与锚标签布局异常问题求助

你的问题根源是HTML标签嵌套不规范：

• 外层表格的<tr>标签未闭合，且<hr>、<a>直接放在了<table>内部——表格仅允许包含<tr>、<td>这类表格专属元素，浏览器会自动调整不符合规范的内容位置，导致链接跑到表格上方。
• 链接挤在一起是因为<a>属于行内元素，默认不会自动换行。

修复后的代码 #

<table border="1">
  <tr>
    <td>
      <table>
        <tr>
          <td>HTML</td>
          <td>★★★★★</td>
        </tr>
        <tr>
          <td>CSS</td>
          <td>★★</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>Javascript</td>
          <td>★</td>
        </tr>
        <tr>
          <td>Node</td>
          <td>★</td>
        </tr>
      </table>
    </td>
  </tr> <!-- 补上缺失的tr闭合标签 -->
</table> <!-- 闭合外层表格 -->
<hr>
<a href="hobbies.html">My Hobbies</a>
<a href="contact.html">Contact Me</a>

额外优化（解决链接挤在一起的问题） #

如果想让两个链接分开显示，可任选以下方式：

• 加空格分隔：

  <a href="hobbies.html">My Hobbies</a> &nbsp;&nbsp;
  <a href="contact.html">Contact Me</a>
  

• 用CSS添加间距：

  <style>
    a { margin-right: 20px; }
  </style>
  <a href="hobbies.html">My Hobbies</a>
  <a href="contact.html">Contact Me</a>
  

• 放入块级元素：

  <p>
    <a href="hobbies.html">My Hobbies</a>
    <a href="contact.html">Contact Me</a>
  </p>
  

内容的提问来源于stack exchange，提问作者MagickViking