Customize TableRow Column Width - html

Question

I have a HTML table.
1st row has 5 elements while 2nd row has only 3 elements.
Why 3 columns of the 2nd row gets the width same as width of respective columns in previous row?
I mean since there are only 3 columns in 2nd row, are they not supposed to auto-resize to fill the row?
I tried setting the width of 2nd column in 2nd row, but that ALSO increases width of 2nd column in 1st row, which I don't want.
Any help appreciated.
EDIT
Required output

Answer 1

Hey now used to colspan
as like this
<table width="100%" cellspacing="0" cellpadding="0">
<tr class="blue">
<td width="35%"></td>
<td width="15%">SignUp</td>
<td width="15%">Create Blog</td>
<td width="15%">Custimize Blog</td>
<td width="15%">Success</td>
</tr>
<tr>
<td colspan="5">
<table width="100%" cellspacing="5" cellpadding="0">
<tr>
<td class="blue2">Create Blog</td>
<td class="blue3">Custimize Blog</td>
<td class="blue4">Success</td>
</tr></table>
</td>
</tr>
</table>
Css
table tr td{
text-align:center;
}
.blue{
background:lightblue;
}
.blue2{
background:red;
}
.blue3{
background:blue;
}
.blue4{
background:green;
}
live demo http://tinkerbin.com/vqnhht02
and now change to width or height according to your design

Answer 2

Try this:
`<table width="100%" cellspacing="0" cellpadding="0">
<tr class="blue">
<td width="20%"></td>
<td width="15%"></td>
<td width="15%">SignUp</td>
<td width="15%">Create Blog</td>
<td width="15%">Custimize Blog</td>
<td width="15%">Success</td>
</tr>
<tr>
<td class="blue" colspan="2">Create Blog</td>
< td class="blue" colspan="2">Custimize Blog</td>
<td class="blue" colspan="2">Success</td>
</tr>
</table>`
Give the background color as per your need.
This width issue is fixed I think.