I'm trying do to a very simple operation of merging two columns in a table. This seems easy with the colspan, but if I merge different columns without leaving at least one row without any merged columns, the sizing gets completely messed up. Please see the following example at http://www.allthingsdope.com/table.html or take a look at and try the following code:

Good:

<table width="700px">
<tr>
    <th width="100px">1: 100px</th>
    <td width="300px">2: 300px</td>
    <td width="200px">3: 200px</td>
    <td width="100px">4: 100px</td>
</tr>
<tr>
    <th width="100px">1: 100px</th>
    <td colspan=2 width="500px" >2 & 3: 500px</td>
    <td width="100px">4: 100px</td>
</tr>

<tr>
    <th width="100px">1: 100px</th>
    <td width="300px">2: 300px</td>
    <td colspan=2 width="300px">3 & 4: 300px</td>
</tr>
</table>

Bad:

<table width="700px">
<tr>
    <th width="100px">1: 100px</th>
    <td colspan=2 width="500px" >2 & 3: 500px</td>
    <td width="100px">4: 100px</td>
</tr>
<tr>
    <th width="100px">1: 100px</th>
    <td width="300px">2: 300px</td>
    <td colspan=2 width="300px">3 & 4: 300px</td>
</tr>
</table>

This seems so simple but I can not figure it out!