HTML Layout Issues.

joelthezombie15 · March 9, 2014

So im trying to teach myself HTML and i have one big file that im just using to mess with stuff, its not meant to be pretty or anything just a place where i can try out what i learn.

So right now i have this.

I want the forms to be center aligned inside the box that says info. I had it inside the copyright box before but now that im trying to get it inside its own box im having trouble.

heres what i have so far. It looks like it should work but its not. (note im using notepad++)

<!DOCTYPE html>

<html>

<body>

<table width="200">

<tr>

<td colspan="2" style="background-color:#660066;text-align:center;">

Info</td>

<form>

Favorite Pie: <input type="text" name="favoritepie"><br>

Last name: <input type="text" name"lastname">

</form>

<form>

Password: <input type="password" name="pwd">

</form>

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a Bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

</tr>

</table>

</body>

</html>

Where did i go wrong?

JamieF · March 9, 2014

I believe it is because there is only a column in your table for the info part at the top. You can create columns and have separate form items in them to make it looks tidier. For example it would look like this.

Here's the code for that.

<!DOCTYPE html><html><body> <table width="20%" border="1" style="background-color:#660066;text-align:center;"><tr><td colspan="2">Info</td></tr><td><form>Favorite Pie: <input type="text" name="favoritepie"><br>Last name: <input type="text" name"lastname"></form><td><form name="input" action="html_form_action.asp" method="get"><br>Username: <input type="text" name="user">Password: <input type="password" name="pwd"><input type="submit" value="Submit"><br></td></tr><tr></td><td><form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form></td><td> <form><input type="checkbox" name="vehicle" value="Bike">I have a Bike<br><input type="checkbox" name="vehicle" value="Car">I have a car</form></td></form></tr></table> </body></html>

Sorry if the code is confusing.

Edit: I'm not sure exactly why the check boxes at the bottom are not lining up but it could be fixed by adding another column to include just them and then another to have the text.

joelthezombie15 · March 9, 2014

I believe it is because there is only a column in your table for the info part at the top. You can create columns and have separate form items in them to make it looks tidier. For example it would look like this.

help.png

Here's the code for that.

<!DOCTYPE html><html><body> <table width="20%" border="1" style="background-color:#660066;text-align:center;"><tr><td colspan="2">Info</td></tr><td><form>Favorite Pie: <input type="text" name="favoritepie"><br>Last name: <input type="text" name"lastname"></form><td><form name="input" action="html_form_action.asp" method="get"><br>Username: <input type="text" name="user">Password: <input type="password" name="pwd"><input type="submit" value="Submit"><br></td></tr><tr></td><td><form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form></td><td> <form><input type="checkbox" name="vehicle" value="Bike">I have a Bike<br><input type="checkbox" name="vehicle" value="Car">I have a car</form></td></form></tr></table> </body></html>

Sorry if the code is confusing.

Perfect thank you!