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

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем dj_hummer, 22 апр 2015.

  1. dj_hummer

    dj_hummer

    Регистрация:
    25 дек 2012
    Сообщения:
    5
    Симпатии:
    0
    Здравствуйте граждане, помогите перевести табличку в дивы.....или подскажите софтинку, чтоб можно было например корреловский файлик перегнать корректно в хтмл.
    вот собственно сама табличка

    <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>

    заранее благдарен
     
  2. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    Ну в общем на скорую руку принцип такой:
    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;
    }
    Покопайте настройки стилей, чтобы получить результат точнее к исходнику