Colspan spanning 2.5 columns?
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/
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/
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>