CODEWITHSUNDEEP
htmlimagehtml-tablealignment
Ryan Tice
Ryan Tice

Reputation: 731

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>

Upvotes: 0

Views: 148

Answers (2)

conflittimat
conflittimat

Reputation: 208

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!

Upvotes: 1

Anurag-Sharma
Anurag-Sharma

Reputation: 4398

Maybe you should go for the CSS3 , It has a lot properties like left , right or top . I do not know css completely but their are a lot of tutorials on the internet.

Upvotes: 1

Related Questions