Colspan spanning 2.5 columns?

Question

I have a table with 5 columns. The final row should have two cells, spaced equally.

Ideally, I would like to use <td colspan="2.5"> - whats the most elegant way to do this?

The table has a border of 1, so using

<td colspan=2">abc</td>
<td></td>
<td colspan=2">def</td>

looks ugly

Answer 1

Do you really need two table cells in the bottom row or just two blocks that are half the width of the entire row? If the latter, then you can make a <td colspan="5"> for the final row, put two <div>s in it, float one to the left and the other to the right, and give them width:50%:

<table>
    <tbody>
        <tr>
            <td>1111</td>
            <td>2222</td>
            <td>3333</td>
            <td>4444</td>
            <td>5555</td>
        </tr>
        <tr>
            <td colspan="5">
                <div class="first-half">
                    half
                </div>
                <div class="second-half">
                    half
                </div>
            </td>
        </tr>
    </tbody>
</table>

And some CSS:

.first-half {
    float: left;
    width: 50%;
}
.second-half {
    float: right;
    width: 50%;
}

And the usual jsfiddle: http://jsfiddle.net/ambiguous/mmZEa/

If you do need them to be table cells then you could double the number of horizontal cells, make all the existing ones <td colspan="2">, and then use <td colspan="5" width="50%"> for the two cells in the bottom row: http://jsfiddle.net/ambiguous/JzrLK/

Answer 2

Try something like this

<table border="1">
    <tr>
        <td>text</td>
        <td>text</td>
        <td colspan="2">text</td>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td colspan="2">text</td>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td colspan="2">text</td>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr>
        <td colspan="3">text</td>
        <td colspan="3">text</td>
    </tr>
</table>

Worked okay on Chrome, FireFox, and IE 7-9.

See fiddle: https://jsfiddle.net/weyy601z/

Answer 3

This seems to work nicely (tested in chrome, ie and firefox) :

<table border="0" CELLPADDING="0" CELLSPACING="0">
<tr>
    <td>
        <table border="1" width="100%">
            <tr>
                <td>abcsss</td>
                <td>sdf</td>
                <td>def</td>
                <td>def</td>
                <td>defsssss</td>
            </tr>
        </table>
    <td>
</tr>
<tr>
    <td>
        <table border="1" width="100%">
            <tr>
                <td width="50%">test</td>
                <td width="50%">test</td>
            </tr>
        </table>
    </td>
</tr>
</table>