Why Does Rowspan "3" Delete One Entire Row And Sets It To "2"

I need help with rowspan, I set it to 3 and colspan to 3, but it deletes one entire row and sets it to 2. I have 4 rows in my table but when I write the code it ends up to 3 rows.

Solution 1:

I didn't get it with the table, but display: grid; exists now.
Here is the template with this solution :

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "a b b g i i i"
    "a b b h j j j"
    "a c d h j j j"
    "a e f h j j j";
  text-align: center;
  width: 100%;
}

.grid-container > div {
    border: 1px solid;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
.e { grid-area: e; }
.f { grid-area: f; }
.g { grid-area: g; }
.h { grid-area: h; }
.i { grid-area: i; }
.j { grid-area: j; }

    

<div class="grid-container">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
  <div class="g">g</div>
  <div class="h">h</div>
  <div class="i">i</div>
  <div class="j">j</div>
</div>

Solution 2:

That's really strange behaviour, but the reason obviously is that none of your columns actually contains four cells (three is the most) and all cells only have very little content (if at all), so the table is being reduced/compressed to three rows in height.

I would definitely call that a rendering or interpretation error of the browser. But...

The crucial point seems to be the second cell in the first row, which should be two rows high: If you actually put some more content into it, it will be two rows high, and the whole table will be displayed as desired. See my snippet below, where the only real difference to your code is the additional content in the second td:

table {
  border-collapse: collapse;
  table-layout: fixed;
  border: 2px solid black;
}

td {
  text-align: center;
  border: 2px solid black;
}

<table align="center" width="50%" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="4">A1</td>
    <td rowspan="2" colspan="2">A2 containing more text</td>
    <td>A3</td>
    <td colspan="3">A4</td>
  </tr>
  <tr>
    <td rowspan="3">B1</td>
    <td rowspan="3" colspan="3">B2</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
  </tr>
  <tr>
    <td>D1</td>
    <td>D2</td>
  </tr>
</table>

P.S.: Note also this answer of mine to a very similar question.