Выравнивание таблицы с изображением HTML

Question

Я пытаюсь выровнять таблицу рядом с изображением, в котором в данный момент находится текст, совпадающий с ним. Я хочу, чтобы выпадающие списки совпадали с нижним краем изображения, может ли кто-нибудь помочь мне в этом? Вот мой код.

<input type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center">xxxxxx 

<table> 
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr> 
<tr> 
<td><select name="os0"> 
    <option value="White">White</option> 
    <option value="Black">Black</option> 
    <option value="Grey">Grey</option> 
</select> </td> 
<td><select name="os1"> 
    <option value="S">S </option> 
    <option value="M">M </option> 
    <option value="L">L </option> 
    <option value="XL">XL </option> 
</select> </td> 

</tr> 

Answer 1

Основываясь на вашем описании, это лучшее, что я мог придумать с помощью CSS для его стилизации.

<style> 
div {height: 180px; 
width: 300px;} 

#image { 
    float:left; 
} 
table { float:right; 
    margin-top: 130px; 
    } 

    </style> 

<div> 
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180"    ALIGN="center"> 

<table> 
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr> 
<tr> 
<td><select name="os0"> 
<option value="White">White</option> 
<option value="Black">Black</option> 
<option value="Grey">Grey</option> 
</select> </td> 
<td><select name="os1"> 
<option value="S">S </option> 
<option value="M">M </option> 
<option value="L">L </option> 
<option value="XL">XL </option> 
</select> </td> 

</tr></table></div> 

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

<table><tr><td> 
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center"></td> 

<td valign="bottom"> <!-- This line right here is what does the trick --> 

<table> 
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr> 
<tr> 
<td><select name="os0"> 
<option value="White">White</option> 
<option value="Black">Black</option> 
<option value="Grey">Grey</option> 
</select> </td> 
<td><select name="os1"> 
<option value="S">S </option> 
<option value="M">M </option> 
<option value="L">L </option> 
<option value="XL">XL </option> 
</select> </td> 

</tr></table> 
    </td></tr> 
     </table> 

надеюсь, что это поможет!

Answer 2

Может быть, вы должны пойти на CSS3, он имеет много свойств, как слева, справа или сверху. Я не знаю css полностью, но их много учебников в Интернете.