formulario con tablas o con css?

[neodani]

Buenas compañeros,

Quiero hacer el formulario de registro de mi pagina y no consigo colocar cada de manera alineada

Quiero llegar a conseguir algo asi, 1, 2, 2, 2, y 1 la derecha.

Usuario:
Contraseña: .................... Confirma Contraseña:...........................
Correo: ............................ Confirma Correo ...................................
Imagen captcha [ imagen] Introduce la imagen: ..........................

.................................................. .........................................Siguiente

Y tengo este codigo, pero no me lo muestra alineado, por ej. el confirma contraseña esta mas a la derecha que el confirma Correo, etc...

Código HTML:

<form id="formulario" method="post" action="includes/registro_user/crear_usuario.php">
					
					<p>
					Para poder utilizar todas las ventajas de <strong>Web/strong>, primero debes registrarte.<br />
					Escribe el nombre que quieres utilizar, una dirección de correo electrónico válida y los demás detalles necesarios en el siguiente formulario.
					</p>
					
					<strong>Nombre de Usuario:</strong><br/>
					<input type="text" class="bginput" name="user" size="25" maxlength="" value="" id="username" style="width: 120px"/><span id="username_status"></span>
					
					<table cellpadding="0" cellspacing="3" border="0" width="500">
					<tr>
						<td>
							<strong>Contraseña:</strong><br />
							<input type="password" class="bginput" name="password" size="25" maxlength="50" value="" onblur="varfield(1);" id="password_1"/>
						</td>
						<td>
							<strong>Confirmar Contraseña:</strong><br />
							<input type="password" class="bginput" name="passwordconfirm" size="25" maxlength="50" value="" onblur="varfield(2);" id="password_2"/>
							</td>
					</tr>
						<tr>
							<td colspan="2">
								<span id="password_1_status"></span>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<span id="password_2_status"></span>
							</td>
						</tr>
					</table>
						
					<table cellpadding="0" cellspacing="3" border="0" width="500">
					<tr>
						<td>
							<strong>Correo Electrónico:</strong><br/>
							<input class="frmemail" name="email" size="25" maxlength="50" value="" style="width: 120px" id="email_1" type="text">
						</td>
						<td>
							<strong>Confirmar Correo Electrónico:</strong><br/>
							<input class="frmemail" name="emailconfirm" size="25" maxlength="50" value="" style="width: 120px" id="email_2" type="text">
						</td>
					</tr>
						<tr>
							<td colspan="2">
								<span id="email_1_status"></span>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<span id="email_2_status"></span>
							</td>
						</tr>
					</table>
					
					<strong>Imagen de seguridad:</strong><br/>
					<div align="center" style="margin-bottom: 10px;"><img border="1" src="includes/registro_user/gen_imagen.php"></div>
					
						<input id="captcha" name="security_code" type="text"/>
						<div id="submit">
						<p><label for="send"></label>
							<input id="send" name="send" value="Siguiente" type="submit"  /><p>
						</div>
				</form> <!-- Fin formulario --> 

Gracias por adelantado!

[hades87]

pero ese diseño es en tablas no? no lo quieres hacer en css?

[neodani]

Iniciado por hades87

pero ese diseño es en tablas no? no lo quieres hacer en css?

Pregunto cual es la mejor opción para hacer este tipo de formulario, ya que tengo que alinear cada cosa.

[LoBo2024]

Hombre si quieres hacerlo bien y en css pues la cosa sería asignar un label a cada etiqueta de la caja donde el label tuviera un tamaño y que la fuente fuese negrita y así se quedaría bien, bueno como me explico como el culo voy a poner un ejemplo ;)

Código HTML:

CSS
label{
float: left;
width: 200px;
font-weight: bold;
}

HTML

<label for="contrasena">Contraseña</label><input type="password" name="contrasena" id="contrasena" /> 

Espero que te sirva de algo. Y espero haberlo puesto bien al 100% :P

[marce_str]

Puedes hacerlo tranquilamente sin tablas, es lo que se debería.
Si se te complica mucho podrías usar divs para poner las "filas" una abajo del otro, con esto sigue siendo un formulario accesible.
Yo a veces uso un <div class="row"></div>

Además recuerda que tienes otras etiquetas de formularios
<fieldset>
<legend>
<label>

ademas de los input, select y textarea.

Saludos