Making Input Form Boxes Horizontal In Html

I been doing some html code in a few days now, but i can't figure out how to make the it all in a horizontal look, just like this exsampel: ID Name Commodity Weight T

Solution 1:

Just make your labels all in one single row of the table, then the input fields for those labels should be jsut under in a second row. So you will have a colomn based input just as you wish, here is a fiddle as a sample.

<divid="header"><h2align="center"style="color: #FFFFFF">Edit Recept</h2></div><divid="content"><divid="form-wrapper"><formmethod="post"action="Front"><table><tr><td>ID </td><td>Name</td><td>Select commodity</td><td>Weight</td><td>Tolerance</td></tr><tr><td><inputtype="text"name="Id" /></td><td><inputtype="text"name="name" /></td><td><select><optionvalue=""disabled="disabled"selected="selected">Please select Commodity</option><optionvalue="1">One</option><optionvalue="2">Two</option></select></td><td><inputtype="text"name="tolerance" /></td><td><inputtype="text"name="name" /></td></tr></table><br /><inputtype="submit"value="Save" /><inputtype="reset"value="Cancel" /><inputtype="hidden"name="whichPage"value="prescription"/></form></div><palign="center">
  Enter the new values and press save to make the change
</p></div>

Note: You should pay attention to the closing tags for table element markups as you are missing some and introducing an open tag instead of a closing one in some rows.

Solution 2:

Just a small hint. This will show the text and input box below each other. But you need to rearrange your whole table with the proper manner. Also dont use multiple tables. Use single table with many columns.

<table><tr><td>ID: </td><td>Name:</td></tr><tr><td><inputtype="text"name="Id" /></td><td><inputtype="text"name="name" /></td></tr></table>