HTML Issue with tables and anchor tags-CodePudding

Absolute beginner here. In lines 52-80 I created a table within a table to allow the star emojis to be placed next to the text (html, css, etc.) but for some reason after the table was made my anchor tags for "My Hobbies" and "Contact Me" got squished together and its above the table even though it comes after the table on lines 79 and 80. What needs fixing?

<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>
  <hr>
  <a href="hobbies.html">My Hobbies</a>
  <a href="contact.html">Contact Me</a>

CodePudding user response：

Just close your first table. But why in the world do you need to insert a table in a table in this example?

table {
  border: 1px solid black;
  
}

.top {
  border-top: 1px solid black;
  
}

.bottom {
  border-bottom: 1px solid black;
}

.right {
  border-right: 1px solid black;
}

.left {
  border-left: 1px solid black;
}

#fin td,
#fin tr {
  padding: 0;
}

#fin tr{
border: 1px solid black;
}

<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>
</table>
<hr>
<a href="hobbies.html">My Hobbies</a>
<a href="contact.html">Contact Me</a>

<table border="1">
  <tr>

    <td>HTML</td>
    <td>★★★★★</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>★★</td>
  </tr>


  <tr>
    <td>Javascript</td>
    <td>★</td>
  </tr>
  <tr>
    <td>Node</td>
    <td>★</td>
  </tr>

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


<table id='fin'>
  <tr class='top'><!--
    --><td class='top left'>HTML</td><!--
    --><td class = 'top right'>★★★★★</td><!--
    --><td class='top left'>Javascript</td><!--
    --><td class='top right'>★</td><!--
  --></tr><!--
  --><tr class='bottom'><!--
    --><td class='bottom left'>CSS</td><!--
    --><td class = 'bottom right'>★★</td><!--
    --><td class='bottom left'>Node</td><!--
    --><td class='bottom right'>★</td><!--
  --></tr>

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