Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Расположение картинок внутри таблицы

Автор: Aliance 8.1.2007, 22:45

Есть табличка, как бы в ней сделать так, чтобы элементы не зависимо от количества картинок в последнем столбце (их может быть от 1 до 5, т.е. не больше чем в остальных) отображались ровно,а расстояние между строчками таблицы было минимальным. Код                                     <table>                                         <tr>                                             <td>                                                 <br /><img src="http://img.combats.ru/i/items/mater16.gif" alt="Morgenshtern" title="Глубинный Камень" width="25" height="25" /> ( 6 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater2.gif" alt="Morgenshtern" title="Золото" width="25" height="25" /> ( 9 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater23.gif" alt="Morgenshtern" title="Ралиэль" width="25" height="25" /> ( 2 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater27.gif" alt="Morgenshtern" title="Камень Затаённого Солнца" width="25" height="25" /> ( 4 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater19.gif" alt="Morgenshtern" title="Кристалл Времён" width="25" height="25" /> ( 7 шт. )                                             </td>                                             <td>                                                 <br /><img src="http://img.combats.ru/i/items/mater13.gif" alt="Morgenshtern" title="Кристалл Тысячи Ответов" width="25" height="25" /> ( 10 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater10.gif" alt="Morgenshtern" title="Кора Змеиного Дерева" width="25" height="25" /> ( 5 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater11.gif" alt="Morgenshtern" title="Кожа Общего Врага" width="25" height="25" /> ( 6 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater4.gif" alt="Morgenshtern" title="Лучистое Серебро" width="25" height="25" /> ( 6 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater28.gif" alt="Morgenshtern" title="Лучистый Рубин" width="25" height="25" /> ( 2 шт. )                                             </td>                                             <td>                                                 <br /><img src="http://img.combats.ru/i/items/mater29.gif" alt="Morgenshtern" title="Лучистый Топаз" width="25" height="25" /> ( 2 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater17.gif" alt="Morgenshtern" title="Плод Змеиного Дерева" width="25" height="25" /> ( 8 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater15.gif" alt="Morgenshtern" title="Сгусток Астрала" width="25" height="25" /> ( 4 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater14.gif" alt="Morgenshtern" title="Сгусток Эфира" width="25" height="25" /> ( 8 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater7.gif" alt="Morgenshtern" title="Слиток Пустынной Руды" width="25" height="25" /> ( 6 шт. )                                             </td>                                             <td>                                                 <br /><img src="http://img.combats.ru/i/items/mater12.gif" alt="Morgenshtern" title="Сталь" width="25" height="25" /> ( 12 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater24.gif" alt="Morgenshtern" title="Стихиалия" width="25" height="25" /> ( 1 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater3.gif" alt="Morgenshtern" title="Серебро" width="25" height="25" /> ( 6 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater8.gif" alt="Morgenshtern" title="Троекорень" width="25" height="25" /> ( 8 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater18.gif" alt="Morgenshtern" title="Тысячелетний Камень" width="25" height="25" /> ( 4 шт. )                                             </td>                                             <td>                                                 <br /><img src="http://img.combats.ru/i/items/mater21.gif" alt="Morgenshtern" title="Эссенция Глубины" width="25" height="25" /> ( 2 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater20.gif" alt="Morgenshtern" title="Эссенция Лунного Света" width="25" height="25" /> ( 3 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater22.gif" alt="Morgenshtern" title="Эссенция Чистоты" width="25" height="25" /> ( 1 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater6.gif" alt="Morgenshtern" title="Железное Дерево" width="25" height="25" /> ( 5 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater1.gif" alt="Morgenshtern" title="Шкура Пещерного Оленя" width="25" height="25" /> ( 9 шт. )                                             </td>                                             <td>                                                 <br /><img src="http://img.combats.ru/i/items/mater30.gif" alt="Morgenshtern" title="Шёпот Гор" width="25" height="25" /> ( 3 шт. )                                             </td>                                         </tr>                                     </table>

Автор: EDuard 9.1.2007, 01:18

Aliance, коментарий обязательно справа от картинки?

Автор: Aliance 9.1.2007, 01:27

Да, обязателен. Саму верстку можно изменить, мне главное чтоб были картинки, по 5 штук в каждой колонке (в последней можно меньше), и справа от них комментарии. Я вот думаю, может без таблиц сделать? Добавлено @ 01:36  Все, сделал: Код                                     <table style="height: 200px; white-space: nowrap;">                                         <tr>                                             <td style="width: 95px; vertical-align: top">                                                 <br /><img src="http://img.combats.ru/i/items/mater16.gif" alt="Morgenshtern" title="Глубинный Камень" width="25" height="25" /> ( 6 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater2.gif" alt="Morgenshtern" title="Золото" width="25" height="25" /> ( 9 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater23.gif" alt="Morgenshtern" title="Ралиэль" width="25" height="25" /> ( 2 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater27.gif" alt="Morgenshtern" title="Камень Затаённого Солнца" width="25" height="25" /> ( 4 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater19.gif" alt="Morgenshtern" title="Кристалл Времён" width="25" height="25" /> ( 7 шт. )                                             </td>                                             <td style="width: 95px; vertical-align: top">                                                 <br /><img src="http://img.combats.ru/i/items/mater13.gif" alt="Morgenshtern" title="Кристалл Тысячи Ответов" width="25" height="25" /> ( 10 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater10.gif" alt="Morgenshtern" title="Кора Змеиного Дерева" width="25" height="25" /> ( 5 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater11.gif" alt="Morgenshtern" title="Кожа Общего Врага" width="25" height="25" /> ( 6 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater4.gif" alt="Morgenshtern" title="Лучистое Серебро" width="25" height="25" /> ( 6 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater28.gif" alt="Morgenshtern" title="Лучистый Рубин" width="25" height="25" /> ( 2 шт. )                                             </td>                                             <td style="width: 95px; vertical-align: top">                                                 <br /><img src="http://img.combats.ru/i/items/mater29.gif" alt="Morgenshtern" title="Лучистый Топаз" width="25" height="25" /> ( 2 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater17.gif" alt="Morgenshtern" title="Плод Змеиного Дерева" width="25" height="25" /> ( 8 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater15.gif" alt="Morgenshtern" title="Сгусток Астрала" width="25" height="25" /> ( 4 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater14.gif" alt="Morgenshtern" title="Сгусток Эфира" width="25" height="25" /> ( 8 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater7.gif" alt="Morgenshtern" title="Слиток Пустынной Руды" width="25" height="25" /> ( 6 шт. )                                             </td>                                             <td style="width: 95px; vertical-align: top">                                                 <br /><img src="http://img.combats.ru/i/items/mater12.gif" alt="Morgenshtern" title="Сталь" width="25" height="25" /> ( 12 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater24.gif" alt="Morgenshtern" title="Стихиалия" width="25" height="25" /> ( 1 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater3.gif" alt="Morgenshtern" title="Серебро" width="25" height="25" /> ( 6 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater8.gif" alt="Morgenshtern" title="Троекорень" width="25" height="25" /> ( 8 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater18.gif" alt="Morgenshtern" title="Тысячелетний Камень" width="25" height="25" /> ( 4 шт. )                                             </td>                                             <td style="width: 95px; vertical-align: top">                                                 <br /><img src="http://img.combats.ru/i/items/mater21.gif" alt="Morgenshtern" title="Эссенция Глубины" width="25" height="25" /> ( 2 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater20.gif" alt="Morgenshtern" title="Эссенция Лунного Света" width="25" height="25" /> ( 3 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater22.gif" alt="Morgenshtern" title="Эссенция Чистоты" width="25" height="25" /> ( 1 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater6.gif" alt="Morgenshtern" title="Железное Дерево" width="25" height="25" /> ( 5 шт. )                                                 <br /><img src="http://img.combats.ru/i/items/mater1.gif" alt="Morgenshtern" title="Шкура Пещерного Оленя" width="25" height="25" /> ( 9 шт. )                                             </td>                                             <td style="width: 95px; vertical-align: top">                                                 <br /><img src="http://img.combats.ru/i/items/mater30.gif" alt="Morgenshtern" title="Шёпот Гор" width="25" height="25" /> ( 3 шт. )                                             </td>                                         </tr>                                     </table>

Автор: EDuard 9.1.2007, 01:38

Возможно подойдет. Код <html>  <head>  </head>  <style>  table, td{  vertical-align: top;  }  </style>  <body>  <table>                                         <tr>                                             <td>                                                 <div><img src="http://img.combats.ru/i/items/mater16.gif" alt="Morgenshtern" title="Глубинный Камень" width="25" height="25" /> ( 6 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater2.gif" alt="Morgenshtern" title="Золото" width="25" height="25" /> ( 9 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater23.gif" alt="Morgenshtern" title="Ралиэль" width="25" height="25" /> ( 2 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater27.gif" alt="Morgenshtern" title="Камень Затаённого Солнца" width="25" height="25" /> ( 4 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater19.gif" alt="Morgenshtern" title="Кристалл Времён" width="25" height="25" /> ( 7 шт. )</div>                                             </td>                                             <td>                                                 <div><img src="http://img.combats.ru/i/items/mater13.gif" alt="Morgenshtern" title="Кристалл Тысячи Ответов" width="25" height="25" /> ( 10 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater10.gif" alt="Morgenshtern" title="Кора Змеиного Дерева" width="25" height="25" /> ( 5 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater11.gif" alt="Morgenshtern" title="Кожа Общего Врага" width="25" height="25" /> ( 6 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater4.gif" alt="Morgenshtern" title="Лучистое Серебро" width="25" height="25" /> ( 6 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater28.gif" alt="Morgenshtern" title="Лучистый Рубин" width="25" height="25" /> ( 2 шт. )</div>                                             </td>                                             <td>                                                 <div><img src="http://img.combats.ru/i/items/mater29.gif" alt="Morgenshtern" title="Лучистый Топаз" width="25" height="25" /> ( 2 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater17.gif" alt="Morgenshtern" title="Плод Змеиного Дерева" width="25" height="25" /> ( 8 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater15.gif" alt="Morgenshtern" title="Сгусток Астрала" width="25" height="25" /> ( 4 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater14.gif" alt="Morgenshtern" title="Сгусток Эфира" width="25" height="25" /> ( 8 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater7.gif" alt="Morgenshtern" title="Слиток Пустынной Руды" width="25" height="25" /> ( 6 шт. )</div>                                             </td>                                             <td>                                                 <div><img src="http://img.combats.ru/i/items/mater12.gif" alt="Morgenshtern" title="Сталь" width="25" height="25" /> ( 12 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater24.gif" alt="Morgenshtern" title="Стихиалия" width="25" height="25" /> ( 1 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater3.gif" alt="Morgenshtern" title="Серебро" width="25" height="25" /> ( 6 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater8.gif" alt="Morgenshtern" title="Троекорень" width="25" height="25" /> ( 8 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater18.gif" alt="Morgenshtern" title="Тысячелетний Камень" width="25" height="25" /> ( 4 шт. )</div>                                             </td>                                             <td>                                                 <div><img src="http://img.combats.ru/i/items/mater21.gif" alt="Morgenshtern" title="Эссенция Глубины" width="25" height="25" /> ( 2 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater20.gif" alt="Morgenshtern" title="Эссенция Лунного Света" width="25" height="25" /> ( 3 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater22.gif" alt="Morgenshtern" title="Эссенция Чистоты" width="25" height="25" /> ( 1 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater6.gif" alt="Morgenshtern" title="Железное Дерево" width="25" height="25" /> ( 5 шт. )</div>                                                 <div><img src="http://img.combats.ru/i/items/mater1.gif" alt="Morgenshtern" title="Шкура Пещерного Оленя" width="25" height="25" /> ( 9 шт. )</div>                                             </td>                                             <td>                                                 <div><img src="http://img.combats.ru/i/items/mater30.gif" alt="Morgenshtern" title="Шёпот Гор" width="25" height="25" /> ( 3 шт. )</div>                                             </td>                                         </tr>                                     </table>                     </body>                     </html>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)