Проблемы с выравниванием

Question

См. Изображение в прикрепленном файле. Мне нужно, чтобы в каждом окне слева внизу справа от изображений «НЕТ ИЗОБРАЖЕНИЙ» я пробовал все виды выравнивания, но, похоже, не могу понять: S есть легкий способ сделать это, что я упускаю?

Вот код, который я сейчас использую:

<?php 
include("header.php"); 
include("connect.php"); 

$getchamps = mysqli_query($con,"SELECT * FROM champions ORDER BY date DESC LIMIT 10"); 

?> 

<style type="text/css"> 
TD{font-family: Arial; font-size: 8pt;} 

</style> 

<?php 

while($r = mysqli_fetch_array($getchamps)){ 
$name = $r['name']; 

    $img = '<img src="images/noimage.gif" />'; 

?> 

<?php echo "<center>",$img,"</center><br>"; ?> 

    <table BORDERCOLOR="grey" align="center" width="200" height="310"> 
<tr> 
<td><b><font style="font-size: 8pt; color:#6699CC;">Name:</font></b></td> 
<td><?php echo $name; ?></td> 
</tr> 
</table> 

<?php 
} 
?> 


<?php 
include("footer.php"); 
?> 

«$ IMG» не на «NO IMAGE», и таблица отображает то, что коробки.

IGNORE PREVIOUS !!

К сожалению, здесь лучше ПИК:

ОЧЕНЬ плохо IMG того, что я хочу, чтобы это выглядело как ..

UPDATE

Answer 1

Все, что вам нужно, это позиционирование с помощью CSS. Я привел пример на JSFiddle.

EDIT: Я обновил это решение и скрипку, чтобы добавить расстояние между «чемпионами».

Вот разметка:

<div class="champ"> 
    <img class="noimage" src="" alt="no image" /> 
    <div class="info"> 
     <div class="namelabel">Name:</div> 
     <div class="name">Sample Name 1</div> 
    </div> 
</div> 
<div class="champ"> 
    <img class="noimage" src="" alt="no image" /> 
    <div class="info"> 
     <div class="namelabel">Name:</div> 
     <div class="name">Sample Name 2</div> 
    </div> 
</div> 

Вот CSS:

.champ { 
    clear: both; 
    overflow: auto; 
    margin: 0 auto 8px auto; 
    width: 358px; 
} 
.noimage { 
    float: left; 
    height: 100px; 
    width: 200px; 
    border: 1px solid black; 
} 
.info { 
    float: left; 
    height: 60px; 
    width: 150px; 
    border: 1px solid black; 
    font: 8pt Arial; 
    padding: 40px 0 0 4px; 
} 
.namelabel { 
    float: left; 
    color: #6699CC; 
    font-weight: bold; 
    margin-right: 8px; 
} 

Answer 2

You можно попробовать обернуть таблицу в DIV и ваше изображение, а также flo на каждом DIV

#mainWrapper{ 
    position:relative; 
    height:100%; 
    width:100%; 
    } 

table{ 
display:block; 
    } 

#tableWrapper{ 
    float:left; 
    width:50%; 
    } 

#imageWrapper{ 
    float:right; 
    width:50%; 
    } 

<div id="mainWrapper"> 
    <div id="tableWrapper"> 
     <table> 
      <tbody> 
      <tr> 
       <td>row</td> 
       <td>row</td> 
       <td>row</td> 
      </tr> 
      <tr> 
       <td>row</td> 
       <td>row</td> 
       <td>row</td> 
      </tr> 
      <tr> 
       <td>row</td> 
       <td>row</td> 
       <td>row</td> 
      </tr> 
      <tr> 
       <td>row</td> 
       <td>row</td> 
       <td>row</td> 
      </tr> 

      </tbody> 
     </table> 

    </div> 

    <div id="imageWrapper"> 
     <img src="http://i.stack.imgur.com/ISZpH.png" alt=""/> 
    </div> 
</div>