Question

My code:

<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>​

But result looks wrong. (jsFiddle_example)

How can I fix it?

Answer 1

The code looks wrong too. Your highest colspan setting is 5, but the most TDs in a row is three. Why is that?

Why not something like this:

<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>​