Align table using rowspan and colspan - html

Question

I want to create a table using rowspan and colspan and it is almost done. only the issue is in last tr. I don't know why but it is not picking the rowspan in last tr.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
As you can see in result I want to merge the last blank td with a.
This is the result I want:

Answer 1

You should put the first set of cells with 3, 4, 5 after the td with the row+colspan.
And omit the empty cells from the last row.
Result:
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td width="20%" height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
<td width="20%">3</td>
<td width="20%">4</td>
<td width="20%">5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
Note that the second column never has content of its own, it is always part of a colspan set. That would normally make the second column collapse on most if not all browsers, and that is why the cell width is being set.

Answer 2

This is simply an error in counting. rowspan="3" means it spans three rows.
First row
<tr>
<td rowspan="3" colspan="2">a</td>
</tr>
Second row
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
Third row
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
Fourth row … so it doesn't span it.
<tr>
<td></td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
(You should omit the empty cells from the final row too).

Answer 3

try this:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<tr style="visibility:hidden">
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tr>
</table>

Answer 4

In order to keep the overlapping of the cells as you stated, you need to use an "invisible" row for reference. I'm not aware of any other way to achieve this, as colspan and rowspan need actual cells as a reference.
Here's an updated version of your example that works that way. Had to change the CSS a bit as well to prevent double borders around the hidden cells.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
.reference,
.reference td {
padding: 0px 5px;
height: 0px;
line-height: 0px;
border: 0 none;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="4" colspan="2">a</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="reference">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>