Simple html table design issue - html

Question

I'm trying to solve a problem: it's a HTML exercise in which I must write the HTML code for a table with this design:
But I can't seem to set it straight, here's my code:
<table border>
<tr>
<td rowspan="2" colspan="2"> Batatas </td>
<td rowspan="3" colspan="2"> Couves </td>
<td> Alhos </td>
<td> Cebolas </td>
</tr>
<tr>
<td rowspan="2" colspan="2"> Alface </td>
</tr>
<tr>
<td colspan="2"> Nabos </td>
</tr>
</table>
And here's the result:
Shouldn't the rowspan="2" in the first "td" tag make the first cell larger (in height)?
What am I doing wrong?

Answer 1

Try this online tool here: http://html-tables.com/
and you will see how the 3 rows collapse to 2 rows visually if you are using just cell merging.
I think you need to nest tables to achieve that effect.

Answer 2

Actually the problem you are facing is not because of your code it is because of general rules of html table rendering, this arises because of merging of table cells
To resolve this drawback of <table> tag, I'll recommend to use <div> tag as better approach.
Try this....
<table border>
<tr>
<td rowspan="2" colspan="1"> Batatas </td>
<td rowspan="3" colspan="1"> Couves </td>
<td rowspan="1" colspan="1"> Alhos </td>
<td rowspan="1" colspan="1"> Cebolas </td>
</tr>
<tr>
<td rowspan="1" colspan="2"> Alface </td>
</tr>
<tr rowspan="1" colspan="2">
<td> Nabos </td>
</tr>
</table>
Update
As I've noticed, this can't be done using <table> tag, You can use the div approach. These div tag are able to generate your layout.
I just finished working on your problem, and I've just solved your problem using <div> tag, Have a look
<div style=" background-color: powderblue;border:1px solid black; width:410px; height:310px">
<div style="float:left;">
<div style="border:1px solid black; width:100px; float:none; height:200px">Batatas
</div>
<div style="border:1px solid black; width:100px; float:none; height:99px">Nabos
</div>
</div>
<div>
<div style="border:1px solid black;width:100px; float:left; height:301px">Couves
</div>
<div style="border:1px solid black;width:100px; float:left; height:100px">Alhos
</div>
<div style="border:1px solid black;width:100px; float:left; height:100px">Cebolas
</div>
<div style="border:1px solid black;width:202px; float:left; height:199px">Alface
</div>
</div>
</div>

Answer 3

Good question. The closest I got (without getting crazy with nested tables) is simply this:
<table border>
<tr>
<td colspan="2"> Batatas </td>
<td rowspan="3" colspan="2"> Couves </td>
<td> Alhos </td>
<td> Cebolas </td>
</tr>
<tr>
<td colspan="2"></td>
<td rowspan="2" colspan="2"> Alface </td>
</tr>
<tr>
<td colspan="2"> Nabos </td>
</tr>
</table>
If this doesn't work for you (and you don't want to get into complex nested html tables), then I the common belief seems to be to move away from html tables to using CSS. Obviously with CSS/divs you have much more control.