Table colspan & rowspan

Question

I have a little problem with the colspan and rowspan. I'm trying to make the following table :

But I'm stuck at the second subtitle with the row span:

<table border="1">
      <tr>
        <th colspan="3"><h1>DIVING</h1></th>
      </tr>
      <tr>
        <td colspan="2">col 1 row 1</td>
        <td>col 1 row 1</td>
      </tr>

      <tr>
        <td>col 1 row 1</td>
        <td>col 1 row 1</td>
        <td>col 1 row 1</td>
      </tr>


</table>

When I put the second <tr> with the <td> in question, it follows the first subtitle, not the second:

Answer 1

this should give you that

<table border="1" width="300px" style="border-collapse: collapse;">
    <tr>
        <td colspan="4"><center>Title</center></td>
    </tr>
    <tr>
        <td colspan="2"><center>subtitle</center></td>
        <td colspan="2"><center>subtitle</center></td>
    </tr>
    
    <tr>
        <td>
            <div>1 item</div>
            <div>1 item</div>
            <div>1 item</div>
        </td>
        <td>
            <div>123</div>
            <div>123</div>
            <div>123</div>
        </td>
        <td>
            <div>1 item</div>
            <div>1 item</div>
            <div>1 item</div>
        </td>
        <td>
            <div>123</div>
            <div>123</div>
            <div>123</div>

        </td>
    </tr>

    <tr>
        <td colspan="2"><center>subtitle</center></td>
        <td colspan="2"><center>subtitle</center></td>
    </tr>
</table>

Answer 2

From the image, it looks like you have 4 columns (not 3). Try something like this;

<table>
    <tr>
        <th colspan="4"><h1>DIVING</h1></th>
    </tr>
    <tr>
        <td colspan="2">col 1&2 row 2</td>
        <td colspan="2">col 3&4 row 2</td>
    </tr>
    <tr>
        <td>col 1 row 3</td>
        <td>col 2 row 3</td>
        <td>col 3 row 3</td>
        <td>col 4 row 3</td>
    </tr>
</table>

Then repeat the third row, and copy the second row as the last one.

http://jsfiddle.net/D9VxN/