[SOLVED] how can a html table have misaligned cell borders

how can a html table have misaligned cell borders

I am struggling to make a html table that copies the layout of the table above. I am just wondering what techniques to use and to recreate that table

I have tried nested tables and have looked into using div instead to create this but am still having issues, mainly with the way that the lines are presented in this and are not in an obvious layout

relevant image

Solution

Here is a cool tool:

https://tabletag.net/

Here you need to nest a table in the second row

table,
td,
th {
  border: 1px solid #595959;
  border-collapse: collapse;
}

td,
th {
  padding: 3px;
  width: 30px;
  height: 25px;
}

th {
  background: #f0e6cc;
}

.even {
  background: #fbf8f0;
}

.odd {
  background: #fefcf9;
}

<table>
  <tbody>
    <tr>
      <td colspan="3"></td>
      <td colspan="5"></td>
      <td colspan="3" rowspan="2"></td>
    </tr>
    <tr>
      <td colspan="3"></td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td colspan="6"></td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>