Как разместить картинки вертикально?

[free_bird]

Здравствуйте!

Я новичок в HTML. Начав изучать столкнулся с такой проблемой:

- нужно на сайте разместить картинки в четыре столбца(своеобразная матрица 4х4)

- нужно обеспечить кроссбраузерность

Должно получиться следующее:

картинка - подпись - картинка - подпись - картинка

картинка - подпись - картинка - подпись - картинка

картинка - подпись - картинка - подпись - картинка

[rus]

Здравствуйте!

Я новичок в HTML. Начав изучать столкнулся с такой проблемой:

- нужно на сайте разместить картинки в четыре столбца(своеобразная матрица 4х4)

- нужно обеспечить кроссбраузерность

Должно получиться следующее:

картинка - подпись - картинка - подпись - картинка

картинка - подпись - картинка - подпись - картинка

картинка - подпись - картинка - подпись - картинка

Делайте таблицой.

[free_bird]

Делайте таблицой.

А как?

[Justnewone]

А как?

Берете таблицу и делаете.

[Searcher]

http://htmlbook.ru/html/table.html

[svvoy]

ВОТ ПОД СЕБЯ ПЕРЕДЕЛАЙ

можно вот здесь онлайн подкоректироватьонлайн редактор

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>

<span
 style="color: rgb(255, 0, 0);"><span
 style="color: rgb(51, 51, 255);"><br>



<table width="100%" border="0" cellpadding="5">
<tr><td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/3"><img border=0 src="http://diving.at.ua/snary/maska_01.jpg" alt="маски">
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/3" class="cat">маски</a> <font class="olive">


<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/4"><img border=0 src="http://diving.at.ua/snary/trubka.jpg" alt="трубки">
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/4" class="cat">трубки</a> <font class="olive"><br>


<tr>
<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/2"><img border=0 src="http://diving.at.ua/snary/lasta_01.jpg" alt="ласты ">
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/2" class="cat">ласты </a> <font class="olive"><br>


<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/5"><img border=0 src="http://diving.at.ua/snary/gidro_01.jpg" alt="гидрокостюмы для дайвинга">
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/5" class="cat">гидрокостюмы для дайвинга</a> <font class="olive"><br>

</tr><tr><td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/14"><img border=0 src="http://diving.at.ua/snary/oxota.jpg" alt="гидрокостюмы для подводной охоты"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/14" class="cat">гидрокостюмы для подводной охоты</a> <font class="olive"><br>
<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/15"><img border=0 src="http://diving.at.ua/snary/suxoy.jpg" alt="гидрокостюмы сухие">
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/15" class="cat">гидрокостюмы сухие</a> <font class="olive"></font><br>

</tr><tr><td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/16"><img border=0 src="http://diving.at.ua/snary/shlem.jpg" alt="шлемы"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/16" class="cat">шлемы</a> <font class="olive"><br>

<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/10"><img border=0 src="http://diving.at.ua/snary/perchatki.jpg" alt="перчатки"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/10" class="cat">перчатки</a> <font class="olive"><br>

</tr><tr><td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/7"><img border=0 src="http://diving.at.ua/snary/bot_01.jpg" alt="боты,носки"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/7" class="cat">боты,носки</a> <font class="olive"><br>

<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/6"><img border=0 src="http://diving.at.ua/snary/kompressor.jpg" alt="компенсаторы плавучести, крылья (BCD)"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/6" class="cat">компенсаторы плавучести, крылья (BCD)</a> <font class="olive"><br>

</tr><tr><td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/11"><img border=0 src="http://diving.at.ua/snary/regul_01.jpg" alt="регуляторы, октопусы дайвинг"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/11" class="cat">регуляторы, октопусы дайвинг</a> <font class="olive"><br>

<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/17"><img border=0 src="http://diving.at.ua/snary/komputer.jpg" alt="декомпрессиметры"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/17" class="cat">декомпрессиметры</a> <font class="olive"><br>

</tr><tr><td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/19"><img border=0 src="http://diving.at.ua/snary/pribori.jpg" alt="приборы- консоли">
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/19" class="cat">приборы- консоли</a> <font class="olive">

<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/13"><img border=0 src="http://diving.at.ua/snary/fonar_01.jpg" alt="фонари "></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/13" class="cat">фонари </a> <font class="olive"><br>

</tr><tr><td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/8"><img border=0 src="http://diving.at.ua/snary/nozik.jpg" alt="ножи подводные"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/8" class="cat">ножи подводные</a> <font class="olive"><br>

<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/20"><img border=0 src="http://diving.at.ua/snary/rujya.jpg" alt="ружья для подводной охоты"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/20" class="cat">ружья для подводной охоты</a> <font class="olive">

</tr><tr><td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/21"><img border=0 src="http://diving.at.ua/snary/gruz_pojas.jpg" alt="груза, грузовые ремни"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/21" class="cat">груза, грузовые ремни</a> <font class="olive"><br>

<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/22"><img border=0 src="http://diving.at.ua/snary/sumki.jpg" alt="сумки для снаряжения"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/22" class="cat">сумки для снаряжения</a> <font class="olive"><br>

</tr><tr><td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/9"><img border=0 src="http://diving.at.ua/snary/balon_01.jpg" alt="баллоны"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/9" class="cat">баллоны</a> <font class="olive"><br>

<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/18"><img border=0 src="http://diving.at.ua/snary/kompressor.jpg" alt="компрессоры"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/18" class="cat">компрессоры</a> <font class="olive"><br>

</tr><tr><td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/23"><img border=0 src="http://diving.at.ua/snary/bui.jpg" alt="буи, аксессуары"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/23" class="cat">разные аксессуары</a> <font class="olive"><br>



<td width="1%" align="center" valign="top">
 <a href="http://diving.at.ua/load/24"><img border=0 src=" [url="http://diving.at.ua/snary/profi.jpg""]http://diving.at.ua/snary/profi.jpg"[/url] alt="буи, аксессуары"></td>
<td width="49%" valign="top">
 <a href="http://diving.at.ua/load/24" class="cat">профессиональное водолазное снаряжение</a> <font class="olive"><br>

</table>
</td> 

[Int]

А где же <td>? И зачем спаны тут?

[dark_hero]

зачем так замудренно?! все намного проще:

<style type="text/css">
img{display:block;}
td{text-align:center;}
</style>
<table>
  <tr>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
  </tr>
  <tr>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
  </tr>
  <tr>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
  </tr>
  <tr>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
    <td><img src="image.jpg"> Подпись</td>
  </tr>

</table>

рабочий пример можно посмотреть вот тут:

http://neoprizma.net/demo/table.html