Sistema de Login

[Desafio]

Olá pessoal, sou novo aqui no fórum e criei para meu site um sistema de login em HTML, e não to conseguindo alinhar as palavras "Username:" e "Senha:" ás caixas de texto delas próprias...

ATUALMENTE ESTÁ ASSIM:

http://imageshack.us/photo/my-images/713/atualmente.png/

E QUERO QUE FIQUE ASSIM:

http://imageshack.us/photo/my-images/40/futuramente.png/

Vou postar o código inteiro do sistema de login:

ESSA PARTE AQUI É A CONFIGURAÇÃO DO SISTEMA!

<script language="JavaScript">
<!-- Begin
function Login(){
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="leoberbert" && password=="leoberbert") { window.location="http://www.seu_site.com.br"; done=1; }
if (username=="outro" && password=="outrosenha") { window.location="http://www.seu_site.com.br"; done=1; }
if (username=="outro" && password=="outrasenha") { window.location="http://www.seu_site.com.br"; done=1; }
if (done==0) { alert("Quem é você? Parece que você não pertence a nossa agência secreta, saia daqui imediatamente!"); }
}
// End -->
</script>

ESSA AQUI É A DO DESIGNER, A PARTE QUE ESTÁ DANDO PROBLEMA!

<center>
<form name=login>
<table width=225 border=0 cellpadding=3 height="123">
<tr><td colspan=2 height="13"><center>
  <p><font face="Arial Black">Área restrita:</font></p>
  </center></td></tr>
<tr><td height="22">
  
  <br />
  <font face="Verdana" style="password font-weight:700">
  <br />
  Detetive:</font></td>
  <td height="22" align="center">
  <input type="text" name="username" size="17" /></td></tr>
<tr><td height="22">
  
  <br />
  Senha:</td><td height="22">
  <input type="text" name="password" size="17" /></td></tr>
<tr><td colspan=2 align=center height="26"><input type="button" value="Sou um detetive" onclick="Login()" /></td></tr>
</table>
</form>
</center>

<p>

<p align="center" style="margin-top: 0; margin-bottom: 0"> </p></p>

Teria como adicionar ou modificar algo no código para que fique tudo alinhado? Me ajudem por favor, estou aguardando respostas, é urgente!

-Obrigado!

Editado Janeiro 24, 2012 por kuroi
Adicionar tag CODE

[Michael Douglas]

Tente este formulario.

<center>
<form name=login>
<table width=225 border=0 cellpadding=3 height="123">
<tr><td colspan=2 height="13"><center>
<p><font face="Arial Black">Área restrita:</font></p>
</center></td></tr>
<tr><td height="22">

<font face="Verdana" style="password font-weight:700">Detetive:</font></td>
<td height="22" align="center">
<input type="text" name="username" size="17" /></td></tr>
<tr><td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font face="Verdana" style="password font-weight:700">Senha:</font></td><td height="22">
<input type="text" name="password" size="17" /></td></tr>
<tr><td colspan=2 align=center height="26"><input type="button" value="Sou um detetive" onclick="Login()" /></td></tr>
</table>
</form>
</center>

<p>

<p align="center" style="margin-top: 0; margin-bottom: 0"> </p></p>

Editado Dezembro 24, 2011 por Michael Douglas