Can I use row span on the last row of a table? - html

Question

I want to make a 3 x 3 table which has Cell 4 spanning 2 rows below and insert Cell 5 below Cell 3. I tried adding a new row and add a cell into it, it occupies the spanning of cell 3 (adjacent to cell 4) instead of being directly below it.
Question is, how do I span cell 4 below (to make it 2 x 2) and add cell 5 beside it?
Code so far:
<table border = "1" cellpadding="10">
<tr>
<td>Cell1</td>
<td>Cell2</td>
<td rowspan = 2>Cell3</td>
</tr>
<tr>
<td rowspan = "2" colspan = "2">Cell4</td>
</tr>
</table>
I want to make something like this:
Any help would be much appreciated!

Answer 1

Just add another <tr>.
I added some css to make it more obvious:
tr{
height: 25px;
}
here's a fiddle. Explanation to follow briefly.
Explanation:
If the css is removed, you'll notice that the line almost disappears. That's because you practically don't have anything on that line. If you have another column of cells (either visible or invisible) which actually utilizes that row, the row will become visible.
This phenomenon happens because the height of the cells is auto, thus it shrinks to 0 when it's empty, which in your case happens because there is no cell that spreads only across on the aforementioned row.
EDIT:
There used to be a html only way, by setting the height inside the table elements, but it's supposedly deprecated as of HTML5 and should be avoided at all costs. Use css instead! If, for some reason, you REALLY need the old html only solution, it's displayed here. But it's a very very very very bad practice to use it, and it might not be compatible with some browsers and etc.
The same is valid for border = "1" cellpadding="10" as pointed out in the comments :)

Answer 2

You need to have an invisible spacer column first.
Also, here's a fiddle: http://jsfiddle.net/tnc1z531/
<style>
td
{
padding: 5px;
border: 1px solid black;
}
.spacer
{
border: 0;
padding: 0;
height: 30px;
}
</style>
<table>
<tr>
<td class='spacer'></td>
<td>Cell1</td>
<td>Cell2</td>
<td rowspan=2>Cell3</td>
</tr>
<tr>
<td class='spacer'></td>
<td rowspan="2" colspan="2">Cell4</td>
</tr>
<tr>
<td class='spacer'></td>
<td>Cell5</td>
</tr>
</table>