Ururu
Ururu

Reputation: 59

HTML <form> elements using table

I am trying to create a group of elements in html (Yes, in HTML ONLY!!! I'm trying not to apply CSS yet, for this!!!) form using table, under the named 2. Pizza Order Details, as you can see here: Screenshot01

Right now I'm stuck on the Type of pizza element. I want to make the colon (:) for Type of Pizza to be placed in line in between (but after!) the words "Type of" and "Pizza", like in Screenshot01 but instead I'm getting this: Screenshot02

My colon (:) for Type of Pizza comes directly right after the word Pizza instead. I don't want this. I need it to be placed like in Screenshot01.

Here is the code I made:

<fieldset>
<legend>2. Pizza Order Details:</legend>
<table style="width:860px">
<tr>
<td align="right">Type of&nbsp;&nbsp;<br>Pizza :</td>
<td>
<select>
<option value=""></option>
<option value="Hawaiian Chicken">Hawaiian Chicken</option>
<option value="Cheese Deluxe">Cheese Deluxe</option>
<option value="Chicken Pepperoni">Chicken Pepperoni</option>
<option value="BBQ Chicken">BBQ Chicken</option>
<option value="Super Supreme">Super Supreme</option>
</select>
</td>
<td style="width:1px" align="left"><strong>|</strong></td>
<td style="width:70px" align="right">Quantity :</td>
<td><input size="3" placeholder="0" type="text"></td>   
</tr>
<tr>
<td align="right">Size :</td>
<td>
<input type="radio" name="size">Small
<input type="radio" name="size">Medium
<input type="radio" name="size">Big
</td>   
<td style="width:1px" align="left"><strong>|</strong></td>
<td style="width:70px" align="right">Topping :</td>
<td>
<input type="checkbox" name="topping" value="Cheese">Cheese
<input type="checkbox" name="topping" value="Pepperoni">Pepperoni
<input type="checkbox" name="topping" value="Sausages">Sausages
<input type="checkbox" name="topping" value="Olives">Olives
</td>   
</tr>
<tr>
<td align="right">Date :</td>
<td><input size="12" placeholder="dd/mm/yyyy" type="text"></td> 
<td style="width:1px" align="left"><strong>|</strong></td>
<td style="width:70px" align="right">Time :</td>
<td><input size="7" placeholder="hh/mm" type="text"></td>   
</tr>
</table>
</fieldset>

Kindly point out what my errors, or what I'm missing here? Thanks!

Upvotes: 0

Views: 501

Answers (1)

JDGuide
JDGuide

Reputation: 6525

Your approach is wrong, because you are using <br> ,which will break the line and the : will come accordingly.

You can use <td align="right">Type of Pizza :</td> . This will show the label on one line, which is really good approach.

Upvotes: 2

Related Questions