Impossible HTML table to do

Question

I need to do the following table in HTML, too easy:

The problem is in the second row, the second column only has one row, not two, in the code is rowspan = "2". Why doesn't work my code, is simple to do, I don't understand this problem, really…

The following is the relevant code:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3">X</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

Answer 1

I just answered a very similar question here a few days ago. Apparently, if none of the columns contains the full amount of intended rows and the cell contents allow it, browsers "compress" the content into less rows (which IMO is a bug or at least, a misinterpretation, but well...).

As soon as you add more content into your cells (at least in those that do make a difference), the desired layout is rendered, with height according to the cell contents:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3">some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

But alternatively, you can add a fixed height to one or some of the cells to make the intended layout visible, even if they don't have as much content:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3" style="height: 80px;">X</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>