Проблема с менюшкой

[Anton63]

Всем здрасте!!!
Проблема такая... учу css, пытаюсь сделать меню с вкладками... нарисовал приблизительно какие должны быть вкладки, создаю таблицу для меню и таблицу стилей...
Но всё выглядит не так как оно быть должно... подскажите в чём проблема...
Скриншот вложен...
Листинг:
Таблица:

<table width=780>
<tr>
<td class="yes" align="center">1</td>
<td class="per" align="center">&nbsp;</td>
<td class="no" align="center">2</td>
<td class="per" align="center">&nbsp;</td>
<td class="no" align="center">3</td>
<td class="per" align="center">&nbsp;</td>
<td class="no" align="center">4</td>
<td class="per" align="center">&nbsp;</td>
<td class="no" align="center">5</td>
<td class="end" align="center">&nbsp;</td>
</tr>
<tr>
<td class="cont" colspan=10>Контент</td>
</tr>
</table>

CSS:

td.yes{
border-spacing: 0px;
background-image: url(img/vk_akt.png);
background-repeat: no-repeat;
width: 100px;
height: 23px;
}

td.no{
border-bottom: 1px solid #565656;
border-spacing: 0px;
background-image: url(img/vk_fon.png);
background-repeat: no-repeat;
width: 100px;
height: 23px;
}

td.per{
border-bottom: 1px solid #565656;
border-spacing: 0px;
width: 3px;
height: 23px;
}

td.end{
border-bottom: 1px solid #565656;
border-spacing: 0px;
height: 23px;
}

td.cont{
border-bottom: 1px solid #565656;
border-left: 1px solid #565656;
border-right: 1px solid #565656;
border-spacing: 0px;
width: 780px;
height: 23px;
}

Безымянный.JPG
Подскажите пожалуйсто как сделать ровную табличку... С JS я разберусь...