How to create a table using colspan, rowspan or css in html?

Question

How can I create a table like the above example using HTML and CSS. I've tried the following:

<table>
    <tr>
    <th>XXX</th>
    <th>XXX</th>
    </tr>
    <tr>
    <td>XXX</td>
    <td>XXX</td>
    </tr>
    <tr>
    <td>XXX</td>
    <td>XXX</td>
    </tr>
    <tr>
    <td>XXX</td>
    <td>XXX</td>
    </tr>
</table>

but it won't work. Can anyone help?

Answer 1

Something like this

 <table border="1" cellpadding="10" cellspacing="0" style="width:100%"> <tr> <td style="width:50%">&nbsp;</td> <td colspan="2">&nbsp;</td> </tr> <tr> <td rowspan="2">&nbsp;</td> <td>&nbsp;</td> <td rowspan="2">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td rowspan="2">&nbsp;</td> <td>&nbsp;</td> <td rowspan="2">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td colspan="2">&nbsp;</td> </tr> </table> 

Answer 2

<table>
<tr>
<th colspan="2">XXX</th>
<th colspan="2">XXX</th>
</tr>
<tr>
<td colspan="2">XXX</td>
<td colspan="2">XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td>XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>
<tr>
<td>XXX</td>
<td>XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>