Search code examples
htmlimagehtml-tablealignment

Aligning table with an image HTML


I am trying to align a table next to image, which has text aligned with it currently. I want to have the dropdowns align with the lower edge of the image, can anyone assist me with this? Here is my code.

<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>


Solution

  • Based on your description, this is the best I could come up with using CSS to style it.

    <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>
    

    But you can also fix the issue by using a table and then vertically aligning the contents of the second cell in the row to the bottom.

        <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>
    

    hope this helps!