用css重复表格边框

table {
  border: 1px solid black;
}
td[class] {
  position: relative;
  padding: 4px;
}
td[class]::before,
td[class]::after{
  content:"";
  position: absolute;
  inset: var(--t,0) var(--r,0) var(--b,0) var(--l,0);
  pointer-events: none;
  border: solid black;
  border-width: var(--w,0);
}
td[class]::after {
  inset: var(--t,2px) var(--r,2px) var(--b,2px) var(--l,2px);
}
.top-left     {--w: 1px 0 0 1px;--b:-4px;--r:-4px;}
.top-right    {--w: 1px 1px 0 0;--b:-4px;--l:-4px;}
.bottom-left  {--w: 0 0 1px 1px;--t:-4px;--r:-4px;}
.bottom-right {--w: 0 1px 1px 0;--t:-4px;--l:-4px;}

<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>

<br><br><br>


<table id='fin'>
  <tr>
    <td class='top-left'>HTML</td>
    <td class='top-right'>★★★★★</td>
    <td class='top-left'>Javascript</td>
    <td class='top-right'>★</td>
  </tr>
  <tr>
    <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>