Cant format html table correctly

Question

I want to achieve this table format

+--------------------+
|         1          |
|--------------------|
|   2         |3     |
|-------------|      |
|   4  |  5   |      |
|      |------|      |
|      | 8| 9 |      |
|      |  |   |------|
|      |  |   | 6 |7 |
+--------------------+

<table border="1" ; width=50%">
<tbody  >
<tr><td colspan="5" >1</td></tr>
<tr><td colspan="3" >2</td><td colspan="2" ; rowspan="3" >3</td></tr>
<tr><td rowspan="3" >4</td><td colspan="2" >5</td></tr>
<tr><td rowspan="2" >8</td><td rowspan="2" >9</td></tr>
<tr><td rowspan="1" >6</td><td>7</td></tr>
</tbody>
</table>

This code should output the table. But the cell 8,9 doesn't work properly.It does show to be little higher than 6,7 if I zoom in.

It works perfectly however if I add a column before

<table border="1" ; width=50%">
<tbody  >
<tr><td>#</td><td colspan="5" >1</td></tr>
<tr><td>#</td><td colspan="3" >2</td><td colspan="2" ; rowspan="3" >3</td></tr>
<tr><td>#</td><td rowspan="3" >4</td><td colspan="2" >5</td></tr>
<tr><td>#</td><td rowspan="2" >8</td><td rowspan="2" >9</td></tr>
<tr><td>#</td><td rowspan="1" >6</td><td>7</td></tr>
</tbody>
</table>

What is wrong here?

Answer 1

You need at least one row with 5 cells. This row can be hidden.

Answer 2

If you are fine with using CSS instead of table (tables are for showing tabular data, not for laying out your website), you can benefit greatly from the grid layout. If you don't know the advantages of relying on CSS Grid instead of HTML table: CSS-Grid instead of , CSS Grid vs Tables, In what sense is a CSS grid a better option than a basic HTML table? and more on your favorite search engine.

Here is a demo showcasing how grid can help you:

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  aspect-ratio: 3; /* fluff for demo purpose */
}

.div1 {
  grid-area: 1 / 1 / 2 / 7;
}

.div2 {
  grid-area: 2 / 1 / 3 / 5;
}

.div3 {
  grid-area: 2 / 5 / 6 / 7;
}

.div4 {
  grid-area: 3 / 1 / 7 / 3;
}

.div5 {
  grid-area: 3 / 3 / 4 / 5;
}

.div6 {
  grid-area: 6 / 5 / 7 / 6;
}

.div7 {
  grid-area: 6 / 6 / 7 / 7;
}

.div8 {
  grid-area: 4 / 3 / 7 / 4;
}

.div9 {
  grid-area: 4 / 4 / 7 / 5;
}

/* fluff for demo purpose */
section {
  border: 1px orange dashed;
  display: grid;
  place-items: center;
}

<div class="parent">
  <section class="div1">1</section>
  <section class="div2">2</section>
  <section class="div3">3</section>
  <section class="div4">4</section>
  <section class="div5">5</section>
  <section class="div6">6</section>
  <section class="div7">7</section>
  <section class="div8">8</section>
  <section class="div9">9</section>
</div>

Generated with: CSS Grid Generator

Answer 3

I had some problems to refactor your table html. I generate a new one.

<table style="width: 100%;" border="1" cellpadding="10">
  <tbody>
    <tr style="height: 21px;">
      <td style="height: 21px;" colspan="5">1</td>
    </tr>
    <tr style="height: 21px;">
      <td style="height: 21px;" colspan="3">2</td>
      <td style="height: 21px;" colspan="2" rowspan="3">3</td>
    </tr>
    <tr style="height: 21px;">
      <td style="height: 63px;" rowspan="3">4</td>
      <td style="height: 21px;" colspan="2">5</td>
    </tr>
    <tr style="height: 21px;">
      <td style="height: 21px;" rowspan="2">6</td>
      <td style="height: 21px;" rowspan="2">7</td>
    </tr>
    <tr style="height: 21px;">
      <td style="height: 21px;">8</td>
      <td style="height: 21px;">9</td>
    </tr>
  </tbody>
</table>