Colspan spanning 2.5 columns?

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>
&l开发者_开发技巧t;td colspan=2">def</td>

looks ugly

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/

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/

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>

you can simply double everything.

instead of

having a table with 5 columns and you would like to use <td colspan="2.5">

you can

have a table with 10 columns and you would like to use <td colspan="5">