Simple html table design issue

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>