tymbark tymbark - 1 month ago 5
HTML Question

Merging cells in a table doesn't work as expected

This is a table that I would like to achieve:

correctly rendered table

But I keep getting something like this:

rendered table with error

This is what I've tried:

<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>


Here's a link to JSFiddle with this (with some extra code for illustration): http://jsfiddle.net/2292D/

Answer

Good old days using table, use rowspan and colspan to achieve that kind of tablular structure, if you are using this for layout than don't, use div instead with float and CSS Positioning.

Demo

<table border="1" width="100%">
    <tr>
        <td rowspan="2" width="30%">a</td>
        <td colspan="2">b</td>
    </tr>
    <tr>
        <td colspan="2">c</td>
    </tr>
    <tr>
        <td colspan="2" width="70%">d</td>
        <td>e</td>
    </tr>
</table>