Search code examples
htmldrop-down-menuhtml-tablealignment

HTML aligning select field


I am trying to align two text fields for a t-shirt website, I would like the select fields to be side-by-side and they appear on top of each other. Any help would be appreciated.

<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td></tr><tr><td><select name="os0">
    <option value="White">White</option>
    <option value="Black">Black</option>
    <option value="Grey">Grey</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Size">Size</td></tr><tr><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>

Solution

  • You mixed up the use of <tr> and <td>. The way I always remember is <tr> is TABLE ROW ... Rows are always horizontal and columns hold things, like Greek Towers, up vertically. Hope this helps.

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