Несколько картинок рядом по горизонтали

by आर्थर

HTML

<!--Страт страницы Netpe▲k -->     
<div class="page1">
<center><h1>Опа.... </h1></center>
<!--  Несколько картинок рядом по горизонтали -->
     <center>
<p class="thumb">
 <img src="http://bloginblog.ru/wp-content/uploads/2012/07/2012-07-15_111733.png" width="220" height="170"><img src="http://www.business-all.com/img/news/google_chrome_yandex.jpg" width="220" height="170">
   <img src="http://iglous.ru/wp-content/uploads/2012/04/title.jpg" width="220" height="170">
   <img src="http://www.monsterseo.ru/img/dart.jpg" width="220" height="170">
 </p>
      </center> 
                         <!--Старт table -->
<table class="smtable">
<caption>2013 р. Атрибуты, значение и их роль в поисковых системах Google vs. Яндекс</caption>
    <tr>
        <th colspan="3"><center>персонализированные теги</center></th>
<th colspan="2">поддержка</th>    
           </tr>
        <tr>   
             <th>№</th>
             <th>мета-тег</th>
             <th>язык разметки</th>
             <th>Яндекс</th>
             <th>Google</th>
    </tr>    
      <tbody>
           <tr>
            <td>1</td>
            <td><span class="tooltip"><a href="#"><strong>none</strong></a><em>Эквивалент NOINDEX, Nofollow<i></i></em></span>

            </td>
            <td>хз</td>
            <td>нет</td>
            <td>да</td>
        </tr>
          
          <tr>
            <td>1</td>
            <td><span class="tooltip"><a href="#"><strong>---</strong></a><em>Альтернативный текст<i></i></em></span>

            </td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>    
         </tbody>
</table>
<!--Конец table -->    
     <br/>   
<pre>
При поддержки Netpe▲k</pre><div style="text-align: right;">
<a class="order" href="http://twitter.com/Netpeak_ua/status/377721527027765248">&nbsp;&nbsp;  ⇒  ветвь дискуссии...&nbsp;&nbsp;</a>
         </div>
</div>     
     <!--Конец страницы Netpe▲k -->

CSS

a { /* Цвет ссылок */
    color: black; 
   }

strong, b { /* полужирное начертание*/
    font-weight:  bold; 
   }

pre, [contenteditable], .kodtextarea { /* Старт. тег pre*/
margin: 10px 0px 10px 10px;
padding: 10px;
color: #3f0309;
font: 90% normal helvetica, sans-serif;
border-left: 4px solid #d2bf94;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
} /* Конец. тег pre*/

.post-body blockquote {  /* Старт. тег blockquote*/
color: #3f0309;
border: 1px solid #d2bf94;
padding: 10px;
border-radius: 4px;
box-shadow: 0 1px 4px #d2bf94, 0 0 40px #f3e7cc inset;
} /* Конец. тег blockquote*/

a.order { /* Старт. Кнопка order*/
  background: -moz-radial-gradient(#fff, #D2BF94);
  background: -ms-radial-gradient(#fff, #D2BF94);
  background: -o-radial-gradient(#fff, #D2BF94);
  background: -webkit-radial-gradient(#fff, #D2BF94);
  text-decoration: none;
  text-align: right
} 

a.order:hover { 
  background-image: -moz-linear-gradient(#a9a57f, #D2BF94);
  background-image: -ms-linear-gradient(#a9a57f, #D2BF94);
  background-image: -o-linear-gradient(#a9a57f, #D2BF94);
  background-image: -webkit-linear-gradient(#a9a57f, #D2BF94); 
  text-decoration: none;
  text-align: right
} /* Конец. Кнопка order*/


   .smtable { /* Старт. Каталог --> */
    color: rgb(50,50,50);
    border: 1px solid #aaa;
    border-collapse: collapse;  /* Убираем двойные линии между ячейками */
    text-align: left;
    width: 100%;
   }

   .smtable td, .smtable th {
    border: 1px dashed #C2C2C2;
    background: #FFFFFF;
   }

   .smtable tr:hover td {
    background: #F7EFDE; /* Цвет td при наведении */
   }

 .smtable th {
    background: #f7f3ea; /* Цвет фона */
   }

tbody a { 
    color: black;
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
   }

tbody tr:hover a {
    color: red;
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
}

tbody strong, tbody b {
    font-weight: normal; /* нормальное начертание */
   }

/* Старт. Каталог -->...