Nested colspan in HTML table

I'm trying to make a simple table but once I set colspans in consecutive table rows, the second row's colspan开发者_开发问答 attributes are overridden :

<table class="d-week">
<caption>
<h4>table</h4>
</caption>
<thead>
    <tr>
        <th class="col_first"></th>
        <th colspan="1">1st week</th>
        <th colspan="1">2nd week</th>
        <th colspan="1">3rd week</th>
    </tr>
    <tr>
        <th></th>
        <th colspan="3">prop1</th>
        <th colspan="3">prop2</th>
        <th colspan="3">prop3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
        <td>col1</td>
        <td>col1</td>
        <td>col1</td>
        <td>col2</td>
        <td>col2</td>
        <td>col2</td>
        <td>col3</td>
        <td>col3</td>
        <td>col3</td>
    </tr>
</tbody>
</table>

But here, the table body cells are aligned with the first row of headers instead of the second (even if I remove the colspan property from the first headers' row). Could someone help me?

EDIT : what if there are more than 3 th in the second header's row ? http://jsbin.com/icetom/3

---

I don'tknow if i understand well, but, maybe you just need to set colspan=3 to the first row of headers. You can think about the calspan relative to the maximum number of cells that you'll have. In your example it's 10. If you want a column in a row to span on more columns you select the number based on that.

---

<table>
<caption>
<h4>table</h4>
</caption>
<thead>
    <tr>
        <th></th>
        <th colspan="3">1st week</th>
        <th colspan="3">2nd week</th>
        <th colspan="3">3rd week</th>
    </tr>
    <tr>
        <th></th>
        <th colspan="3">prop1</th>
        <th colspan="3">prop2</th>
        <th colspan="3">prop3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
        <td>col1</td>
        <td>col1</td>
        <td>col1</td>
        <td>col2</td>
        <td>col2</td>
        <td>col2</td>
        <td>col3</td>
        <td>col3</td>
        <td>col3</td>
    </tr>
</tbody>
</table>

Live example here: http://jsbin.com/ateraw/