[Помогите] Перевести table в div

Здравствуйте граждане, помогите перевести табличку в дивы.....или подскажите софтинку, чтоб можно было например корреловский файлик перегнать корректно в хтмл.
вот собственно сама табличка

<p style="font-size: large">{title}
</p>
<table>
<tbody>
<tr>
<td colspan="3" rowspan="5" style="text-align: center" bordercolor="grey" border="1">[xfgiven_img1][xfvalue_img1][/xfgiven_img1]</td>
<td colspan="3" style="font-style: italic; font-size: xx-small; text-align: right;">[xfgiven_nal][xfvalue_nal][/xfgiven_nal]</td>
</tr>
<tr>
<td colspan="3" bgcolor="#FF0308" style="color: #F8F8F8; font-size: x-large; font-weight: bold; text-align: center;"><span style="text-align: center">[xfgiven_cena][xfvalue_cena][/xfgiven_cena]</span></td>
</tr>
<tr>
<td colspan="3" style="font-style: normal"><p>Размер: [xfgiven_razmer][xfvalue_razmer][/xfgiven_razmer]</p>
<p>Материал: [xfgiven_mat][xfvalue_mat][/xfgiven_mat]</p>
<p>Цвет: [xfgiven_color][xfvalue_color][/xfgiven_color]</p></td>
</tr>
<tr>
<td colspan="3" style="color: #00CBFF; font-weight: bold;"><a href="/mat.html" style="color: #00CBFF; font-weight: bold;">Материалы для индивидуального заказа</a></td>
</tr>
<tr>
<td colspan="3" style="font-size: xx-small; text-align: justify;">{short-story}</td>
</tr>
<tr>
<td rowspan="2"><span style="text-align: center" width="150">[xfgiven_img2][xfvalue_img2][/xfgiven_img2]</span></td>
<td rowspan="2"><span style="text-align: center" width="150">[xfgiven_img3][xfvalue_img3][/xfgiven_img3]</span></td>
<td rowspan="2"><span style="text-align: center" width="150">[xfgiven_img4][xfvalue_img4][/xfgiven_img4]</span></td>
<td colspan="3"><h2>С этим товаром смотрят</h2></td>
</tr>
<tr>
<td align="center" valign="middle" width="150px."><p>[xfvalue_tovar1]</p>
<p>&nbsp;</p></td>
<td align="center" valign="middle"width="150"><p>[xfgiven_tovar2][xfvalue_tovar2][/xfgiven_tovar2]</p>
<p>&nbsp;</p></td>
<td align="center" valign="middle"width="150"><p>[xfgiven_tovar3][xfvalue_tovar3][/xfgiven_tovar3]</p>
<p>&nbsp;</p></td>
</tr>
</tbody>
</table>

заранее благдарен

 

Ну в общем на скорую руку принцип такой:

HTML:

<div class="hl">[xfgiven_img1][xfvalue_img1][/xfgiven_img1]</div>
<div class="hr">
    <div class="a">[xfgiven_nal][xfvalue_nal][/xfgiven_nal]</div>
    <div class="b">[xfgiven_cena][xfvalue_cena][/xfgiven_cena]</div>
    <div class="c">Размер: [xfgiven_razmer][xfvalue_razmer][/xfgiven_razmer]<br>Материал: [xfgiven_mat][xfvalue_mat][/xfgiven_mat]<br>Цвет: [xfgiven_color][xfvalue_color][/xfgiven_color]</div>
    <div class="d"><a href="/mat.html" style="color: #00CBFF; font-weight: bold;">Материалы для индивидуального заказа</a></div>
    <div class="e">{short-story}</div>
</div>
<div class="fl">[xfgiven_img2][xfvalue_img2][/xfgiven_img2]    [xfgiven_img3][xfvalue_img3][/xfgiven_img3]    [xfgiven_img4][xfvalue_img4][/xfgiven_img4]</div>
<div class="fr">
    <div>С этим товаром смотрят</div>
    <div class="h">[xfvalue_tovar1]</div>
    <div class="h">[xfgiven_tovar2]<br>[xfvalue_tovar2]<br>[/xfgiven_tovar2]</div>
    <div class="h">[xfgiven_tovar3]<br>[xfvalue_tovar3]<br>[/xfgiven_tovar3]</div>
</div>

стили:

HTML:

.hl{
    float: left;
    width: 48%;
}
.hr {
    float: left;
width: 24%;
}
.a{
height: 16px;
}
.b{
background: red;
height: 48px;
}
.c{
height: 48px;
}
.d{
height: 16px;
}
.e{
height: 16px;
}
.fl{
    clear: both;
    float: left;
    width: 48%;
}
.fr{
    float: left;
    width: 24%;
}
.h{
    width: 33%;
float: left;
}

Покопайте настройки стилей, чтобы получить результат точнее к исходнику