Making Text Boxes Aligned - html

Question

I am having an issue right now. When I load up my webpage, all of the boxes/words are aligned awkwardly, and I was wondering if I can get some help aligning the boxes all to be on the same line.
click here for a jsfiddle demo
<table bgcolor="#bbbbbb" width="100%" border="0" cellspacing="0" cellpadding="0" valign="center">
<tr>
<td width="10%" valign="top" align="center">
<form name="form1" method="post" action="checklogin.php">
<font size="5"><strong>Account Login</strong></font><br />
Username :
<input name="myusername" type="text" id="myusername"><br />
Password :
<input name="mypassword" type="password" id="mypassword"> <br />
<input style="width:75px; font-size:14px; height:25px;" type="submit" name="Submit" value="Login">
</form>
</td>
<td width="10%" valign="top" align="center">
<form id="form1" name="form1" method="post" action="registration_script.php">
<font size="5"><strong>Account Register</strong></font><br />
Username :
<input type="text" name="txtUser" id="txtUser" /> <br />
Repeat :
<input name="myusername" type="text" id="myusername"><br />
Password :
<input type="password" name="txtPassword" id="txtPassword" /> <br />
Repeat :
<input name="myusername" type="text" id="myusername"><br />
<input style="width:75px; font-size:14px; height:25px;" type="submit" name="btnRegister" id="btnRegister" value="Register" />
</td>
</tr>
</form>
</table>

Answer 1

try to check this one: Edited
hope this gives the idea(on my own very way:)).
<table bgcolor="#bbbbbb" width="100%" border="0" cellspacing="0" cellpadding="0" valign="center">
<tr>
<td width="10%" valign="top" align="center">
<form name="form1" method="post" action="checklogin.php">
<table>
<thead align="center">Account Login</thead>
<tr>
<td>Username :</td>
<td><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password :</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td></td>
<td colspan="1"><input style="width:75px; font-size:14px; height:25px;" type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</form>
</td>
<td width="10%" valign="top" align="center">
<form id="form1" name="form1" method="post" action="registration_script.php">
<table>
<thead align="center">Account Register</thead>
<tr>
<td>Username :</td>
<td> <input type="text" name="txtUser" id="txtUser" /></td>
</tr>
<tr>
<td>Repeat :</td>
<td><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="txtPassword" id="txtPassword" /></td>
</tr>
<tr>
<td>Repeat :</td>
<td><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td></td>
<td colspan="1"><input style="width:75px; font-size:14px; height:25px;" type="submit" name="btnRegister" id="btnRegister" value="Register" /></td>
</tr>
</table>
</form>
</td>
</tr>
​

Answer 2

In case you don't mind tableless:
<style>
.pseudo-table, form p {
display: table;
background-color: #bbbbbb;
}
.pseudo-cell, form p label {
display: table-cell;
vertical-align: top;
}
form p label {
width: 100px;
}
</style>
<div class='pseudo-table'>
<div class='pseudo-cell'>
<form name='form1' method='post' action='checklogin.php'>
<h2>Account Login</h2>
<p>
<label>Username</label>
: <input name='myusername' type='text' id='myusername'>
</p>
<p>
<label>Password</label>
: <input name='mypassword' type='password' id='mypassword'>
</p>
<button>Login</button>
</form>
</div>
<div class='pseudo-cell'>
<form name='form2' method='post' action='registration_script.php'>
<h2>Account Register</h2>
<p>
<label>Username</label>
: <input type='text' name='txtUser' id='txtUser'>
</p>
<p>
<label>Repeat</label>
: <input name='myusername' type='text' id='myusername'>
</label>
<p>
<label>Password</label>
: <input type='password' name='txtPassword' id='txtPassword'>
</p>
<p>
<label>Repeat</label>
: <input name='myusername' type='text' id='myusername'>
</p>
<button>Login</button>
</form>
</div>
</div>

Answer 3

you can define you own css to define the alignment
for example:
<style>
selector{
float:left;
}
</style>