JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td rowspan="2">1</td>
    <td colspan="4">2</td>
    <td rowspan="2">5</td>
  </tr>
  <tr>
    <td colspan="2">3</td>
    <td colspan="2">4</td>
  </tr>
  <tr>
    <td rowspan="2">6</td>
    <td colspan="2" class="no-bottom-border">7</td>
    <td colspan="2" class="no-bottom-border">8</td>
    <td rowspan="2">11</td>
  </tr>
  <tr>
    <td class="no-top-border">9</td>
    <td rowspan="2" colspan="2">Center</td>
    <td class="no-top-border">10</td>
  </tr>
  <tr>
    <td rowspan="3">12</td>
    <td colspan="1" class="no-bottom-border">13</td>
    <td colspan="1" class="no-bottom-border">14</td>
    <td rowspan="3">15</td>
  </tr>
  <tr>
    <td colspan="2" class="no-top-border">16</td>
    <td colspan="2" class="no-top-border">17</td>
  </tr>
  <tr>
    <td colspan="4">18</td>
  </tr>
</table>

CSS

table {
  --border-width: 1px;
  --border-color: #000;

  width: 350px;

  border-collapse: collapse;
  table-layout: fixed;

  color: rgba(0, 0, 0, .1);
}

td {
  padding: 10px;
  border: var(--border-width) solid var(--border-color);

  text-align: center;
}

.no-bottom-border {
  border-bottom: 0;
}

.no-top-border {
  border-top: 0;
}