user3818340 user3818340 - 1 month ago 5
HTML Question

Separating table column into 3 parts

I am having problems with dividing my bottom row into 3 parts. I would appreciate some help with this by fixing it or redesigning it.

Html:

<table border="1" cellspacing="0">
<tr>
<td style='width:120px; height:20px;'>Creeper</td>

<td rowspan="2" style='width:120px; height:120px;'></td>
</tr>

<tr>
<td rowspan="2" style='width:100px;'>Creeper</td>
</tr>

<tr>
<td style='width:120px; height:120px;'></td>
</tr>

<tr>
<td style='width:40px; height:20px;'></td>

<td style='width:80px; height:20px;'></td>
</tr>
</table>


JSFiddle

http://jsfiddle.net/j76bY/

Answer

Update your table like below.

<table border="1" cellspacing="0">
<tr>
    <td colspan="2" style='width:120px; height:20px;'>Creeper</td>

    <td rowspan="2" style='width:120px; height:120px;'></td>
</tr>

<tr>
    <td rowspan="2" colspan="2" style='width:100px;'>Creeper</td>
</tr>

<tr>
    <td style='width:120px; height:120px;'></td>
</tr>

<tr>
    <td style='width:40px; height:20px;'></td>
    <td style='width:80px; height:20px;'></td>
    <td style='width:120px; height:20px;'></td>
</tr>
</table>

DEMO

Comments