html - colspan を使用した TD の固定幅の DIV

Question

私のコード:

<table style="width: 500px;">
        <tr>
            <td colspan="5">
                <div style="width: 500px;">colspan_5</div>
            </td>              
        </tr>
        <tr>
            <td colspan="1">
                <div style="width: 100px;">colspan_1</div>
            </td> 
            <td colspan="3">
                <div style="width: 300px;">colspan_3</div>
            </td>                
            <td colspan="1"> 
                <div style="width: 100px;">colspan_1</div>
            </td>               
        </tr>  
        <tr>
            <td colspan="2">
                <div style="width: 200px;">colspan_2</div>
            </td> 
            <td colspan="3">
                <div style="width: 300px;">colspan_3</div>
            </td>                
        </tr> 
        <tr>
            <td colspan="5">
                <div style="width: 500px;">colspan_5</div>
            </td>                                
        </tr> 
</table>​

しかし、結果は間違っているようです。( jsFiddle_example )

どうすれば修正できますか？

Answer 1

コードも間違っているようです。最高のcolspan設定はですが、連続し5て最も多いのは3です。TDs何故ですか？

なぜこのようなものではないのですか？

<table style="width: 500px;">
    <colgroup>
        <col style="width:100px;" />
        <col style="width:200px;" />
        <col style="width:100px;" />
    </colgroup>
    <tr>
        <td colspan="3">
            <div>colspan_5</div>
        </td>              
    </tr>
    <tr>
        <td>
            <div>colspan_1</div>
        </td> 
        <td>
            <div>colspan_3</div>
        </td>                
        <td> 
            <div>colspan_1</div>
        </td>               
    </tr>  
    <tr>
        <td>
            <div>colspan_2</div>
        </td> 
        <td colspan="2">
            <div>colspan_3</div>
        </td>                
    </tr> 
    <tr>
        <td colspan="3">
            <div>colspan_5</div>
        </td>                                
    </tr> 
</table>​