[РЕШЕНО] Отступ в таблице.

[IgorVS]

Приветствую.

Есть таблица.

<div class="box">
  <div class="top"><img src="catalog/view/theme/default/image/bestsellers.png" alt="" /><?php echo $heading_title; ?></div>
  <div class="middle">
    <?php if ($products) { ?>
    <table cellpadding="2" cellspacing="0" style="width: 100%;">
      <?php foreach ($products as $product) { ?>
      <tr>
        <td valign="top" style="width:1px">
<a href="<?php echo str_replace('&', '&', $product['href']); ?>"><img src="<?php echo $product['image']; ?>" alt="<?php echo $product['name']; ?>" /></a></td>
        <td valign="top"><a href="<?php echo str_replace('&', '&', $product['href']); ?>">
<?php echo $product['name']; ?></a>
          <?php if ($display_price) { ?>
          <br />
          <?php if (!$product['special']) { ?>
          <span style="font-size: 11px; color: #900;"><?php echo $product['price']; ?></span>
          <?php } else { ?>
          <span style="font-size: 11px; color: #900; text-decoration: line-through;"><?php echo $product['price']; ?></span> <span style="font-size: 11px; color: #F00;"><?php echo $product['special']; ?></span>
          <?php } ?>
          <a class="button_add_small" href="<?php echo $product['add']; ?>" title="<?php echo $button_add_to_cart; ?>" > </a>
          <?php } ?>
          <?php if ($product['rating']) { ?>
          <br />
          <img src="catalog/view/theme/default/image/stars_<?php echo $product['rating'] . '.png'; ?>" alt="<?php echo $product['stars']; ?>" />
          <?php } ?>
 
                       <br />  <img src="catalog/view/theme/default/image/Картинка.png" />
 
 
</td>
      </tr>
      <?php } ?>
    </table>
    <?php } ?>
  </div>
  <div class="bottom"> </div>
</div>

Вывод получается такой.
 

Картинка_____Название товара

тут__________Цена_Кнопка добавить

Тоесть td у нас вертикальные столбцы выводятся.

Нужно перед и после этого блока сделать отступы, что бы выделить блок.

Пробовал вставлять различные теги отступов и размеров, много чего, но или криво получается, или таблица их игнорирует.
Пока придумал только вставить прозрачные картинки заданной высоты, что бы они смещали текст куда надо. Строка.

                       <br />  <img src="catalog/view/theme/default/image/Картинка.png" />

Но как то выглядит это всё через задницу.

Можно как то сделать более нормально? Может я что то незнаю.

[IgorVS]

В общем ничего у меня и с картинкой неполучилось.
Там проблема вот в чём. Добавить отступы я так и несмог. Они или работают неправильно, или игнорируются браузером.
Если я вставляю ещё одну строку, то немогу для этой строки задать высоту, буквы по высоте меняются, а вот тег br ни в какую, как неставил он всёравно отрабатывается по общему размеру шрифта для страницы, а это почти в три раза больше необходимого.
Отсюда вопрос, как задать в этой таблице отступы между горизонтальными блоками?

[chukcha]

Казалось бы... таблицы это просто

 

Вы бы картинку показали

Нужно перед и после этого блока сделать отступы, что бы выделить блок.

 

ЗадумалсО. Что хотел сказать автор?

[IgorVS]

Без проблем.

Вот картинка. Красным нарисовано как выводится, синим мои пояснения.

 

Ссылку на сайт недам, он у меня на локальном компьютере, но если нужен какой код, без проблем.

[chukcha]

ПечалькО!

Оказывается я вы не умеете готовить таблицы

Тренируйтесь

http://jsfiddle.net/TNuNQ/1/

[IgorVS]

Знаете, а ещё можно закончить институт на программиста и лет пять проработать в какойнибудь фирме, постигая все тонкости. Вот только тогда я бы никогда незадал вопрос здесь на форуме. Это раз.
А два это то, что я на живом сайте уже натренировался, упёрся в тупик, поискал решение, ненашёл и задал вопрос тут.

Ну и три то, что если сами незнаете как зделать отступ, тогда зачем умничать? Плохо выглядите.

[destreser]

Переверстайте блоками, уже давно 21 век.

Змінено 26 грудня 2013 користувачем destreser

[chukcha]

Вы собираетесь верстать  таблицей?

Я Вам показал как это делается, так что про умничать не надо...

 

Мой пример полностью удовлетворяет ваши хотелки.

Даже больше... Мой пример, избавит вас от некоторых проблем, о которых вы еще не подозреваете.

[IgorVS]

Ребят. Я правлю сайт своей подруги, поэтому своими силами.
Я очень прошу, если сталкивались подскажите как сделать в моём варианте. Боюсь чегонибудь поломать, так как там саописные вставки, а я неочень разбираюсь во всём этом и переписать пол сайта в случае чего мне несветит.
chukcha, прошу прощения. По вашим словам было непонятно, что вы предлагаете мне заменить таблицу на другую.

[destreser]

chukcha, ссылка то правильная?

А то разговор о таблицах, а в примере список.

[chukcha]

destreser, ой :(

[chukcha]

http://jsfiddle.net/4Gay6/

[IgorVS]

Очень благодарю, днём буду разбираться.
Вы меня выручили.

[chukcha]

Там была ошибочка - поправил

http://jsfiddle.net/4Gay6/10/

[IgorVS]

Сработало! Ура!

Я даже незаметил ошибки, Вы меня главное на общую конструкцию и теги натолкнули, а дальше я сам разобрался.

У меня там выходит конструкция вида.

<table cellpadding="2" cellspacing="0" style="width: 100%;">
    <tr>
        <td valign="top" style="width:1px">Картинка</td>
        <td valign="top">Описание.
                  <br />цена кнопка.
        </td>
    </tr>
    <tr>
        <td colspan="2"></td>
    </tr>
</table>

Как видно из кода я добавил.

    <tr>
        <td colspan="2"></td>
    </tr>

А в файл css вставил.

td[colspan="2"]{
    height:40px
}

Соответсвенно отступ 40 посмотрю завтра на свежую голову, что бы он красиво вписался.

Ещё раз благодарю очень. Выручили.

Тема решена.