I try to split the middle row and keep the upper row and bottom as-is.

```html
<table border="1" width="500">
    <tbody>
        <tr bgcolor="red">
            <td width="10%">&nbsp;</td>
            <td width="80%">&nbsp;</td>
            <td width="10%">&nbsp;</td>
        </tr>
        <tr bgcolor="green">
            <td width="50%" colspan="2">&nbsp;</td>
            <td width="50%">&nbsp;</td>
        </tr>
        <tr bgcolor="blue">
            <td colspan="3">&nbsp;</td>
        </tr>
    </tbody>
</table>                                         
```

How do I split the middle row into two equal columns, using one table tag?