Pasar un formulario hecho en una tabla a divs

Buenas a todos de nuevo, pues yo soy de la antigua escuela asi que me esta costando pasarme a las divs, ya que uso las tablas para todo. Ahora tengo un formulario que contiene 6 campos y claro quiero meterlo en una div, pero quiero que quede exactamente igual que en la tabla pongo un ejemplo de la tabla:

<table>
 <tr>
   <th>Nombre:</th>
   <td><asp></td>
<th>Apellidos:</th>
   <td><asp></td>
 </tr>
</table>

Ahora bien, como lo puedo llevar estos formularios hechos asi a capas?
La tabla no deberia haber salido asi, no se que ha podido pasar. Pero era una tabla que tenia estilos y controles de asp.net.
(table border="0" cellpadding="0" cellspacing="0")
(tr)
  (th style="text-align: Right;")Nombre:(/th)
  (td style="padding:5px;")(asp:TextBox id="Nombre" runat="server"/)
  (/td)
  (th style="text-align: Right;")Apellidos:(/th)		
  (td style="padding:5px;")(asp:TextBox id="Apellidos" runat="server"/)
  (/td)
(/tr)
(/table)

Estoy intentando migrar todo lo que hay hecho en tablas a divs, claro tambien tengo que tener en cuenta el tiempo que voy a tardar en adaptarlo a divs, si es mucho tiempo entonces no lo hago, por favor que alguien arroje algo de luz sobre el tema gracias.
Hola diferencial,

No sé muy bien lo que quieres ya que el código Asp no lo puedo ver , pero por lo que veo tu has hecho una tabla con 4 columnas y has puesto:

Nombre - formulario - apellido - formulario.

Eso se puede hacer perfectamente sin tablas ni divs ya que es texto en una sola linea.

Si te queda muy junto le puedes añadir espacios (&nbsp) o puedes usar los estilos para darle margen derecho al texto.

<style>

.texto {margin:0 10px 0 0 ;}

</style>

Yo es que para los formularios uso tablas, es más cómodo!!!

A ver si alguien más entendido te puede ayudar.

Un saludo.
Hola solidaria,
Gracias por la respuesta, pero es un ejemplo chorra que he puesto. Ha sido error mio por ponerlo tan básico, en realidad es un formulario mucho mayor que contiene dos columnas y como que 10 campos. Me gustaria saber si con un div, se puede hacer eso y que cuadre igual que se hace con una tabla. Con la tabla queda todo alineado muy bien, ahora tampoco quiero volverme loco y cambiarlo todo para usar divs, porque supongo que los divs seran buenos para lo que son, pero habra cosas que aun seguiran siendo más faciles con tablas. Pero es la duda que tengo de como pasar esa tabla a divs. Etiquetas como no las uso, porque segun lo que veo el estandar no deberia usarse etiquetas que modifiquen el contenido como por ejemplo <font> se usa más bien divs con estilos.
Me temo que yo no te puedo ayudar, siempre he usado tablas para los formularios pero me ha picado la curiosidad, ya miraré por internet a ver si encuentro algo.

Supongo que también depende la complejidad del formulario, si tienes algún ejemplo de lo que quieres no estaría mal que nos pusieras ese link.
Fíjate que se recomienda usar tablas excusivamente para lo que son, ordenar elementos y precisamente un formulario es eso, no? Pienso que es uno de los pocos casos en los que se acepta el uso de tablas.

De todos modos, claro que se puede hacer con capas, pero lo mejor es que nos pegues un croquis de lo que quieres conseguir e inventamos una estructura para ello rápidamente, oki?

Un saludo! :wink:
Estoy de acuerdo con jorgens, las tablas también tienen utilidad o sino no existirían, y creo que los formularios son uno de esos casos.

El problema de los divs es que en todos los navegadores no se va a ver igual y no quedan completamente alineados.

Yo he hecho una prueba con divs en hacer dos columnas y queda un poco descentrado.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
legend {font-family:Georgia, "Times New Roman", Times, serif; color:#666666; font-weight:bold;}
#formuglobal {width:400px; heigh:auto; }
#formuizq {margin:5px 10px 0 0; widht:30px; text-align:right; float:left; font-family:Georgia, "Times New Roman", Times, serif; color:#666666; size:12px; }
#formudr {margin:5px 0 0 0; widht:60px; text-align:left; float:left; size:12px; font-family:Georgia, "Times New Roman", Times, serif; color:#666666; }
.input1 {height:12px;}
.input2 {width:190px; heigh:15px;}
textarea {height:100px;}
-->
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <div id="formuglobal">
  <fieldset>
  <legend>Formulario de contacto</legend>

   <div id=formuizq> 

Nombre: 
         </p>
    

Apellidos: 
      </p>
    

E-mail: 
      </p>
    

Mensaje: 
      </p></div>
		  <div id="formudr">
		    



		      <input name="textfield" type="text" class="input1" />
	        </p>
		    


		      <input name="textfield2" type="text" class="input1" />
</p>
		    


		      <input name="textfield3" type="text" class="input1" />
		    </p>
		    



		      <textarea name="textarea"></textarea>
		    </p>
		    


		      <input name="Submit" type="submit" class="input2" value="Enviar" />
		    </p>
		  </div>
  </fieldset></div>
  

</p>

  

</p>
</form>


</p>


</p>
</body>
</html>
Hola a todos,
Este post lo he puesto debido porque en programas de gestión, que es lo habitual existen muchos formularios. Donde yo trabajo, todos lo hacemos con tablas (Somos programadores no diseñadores :D) debido a que me gusta indagar en todo, descubri que es una mala practica hacer tablas, asi que intente averiguar como realizar la tarea que hago la mayoria de los dias con divs. Pero me he dado cuenta que algo estoy haciendo mal, porque creo que es mucho más dificil usar divs que una simple tabla. Las tablas no suelen variar mucho tienen dos o tres columnas y mirar el formulario de arriba, pues la historia esta ahi que el resultado de esa tabla como quedaria pasarlo en divs.
en esas mismas estoy yo
intentando hacer un formulario, con divs

lo dificil, (creo yo ) no es usar las div mas bien es lo mucho que estamos acostumbrados a las tablas, y al dream

bueno al menos en mi caso :oops: :oops: :oops:

y me está costando mucho entender bien las divs

saludos
hola solidaria, mientras estaba escribindo mi ultimo post, has puesto el tuyo, pues justo hice lo mismo que tu. No se si esto influira, pero yo uso el esquema xhtml 1.0 Transitional para las páginas. En teoria deberia de verse en todos los navegadores igual no? No lo se porque siempre uso internet explorer, asi que tampoco me preocupa mucho. El caso es que esa forma no me convencia de hacerlo asi, pero por lo visto es la mejor forma de hacerlo con divs, muchas gracias por las respuestas.
OS informo que si tras escribir el mensaje activais la casilla de debajo, donde pone "Deshabilitar HTML en este mensaje" os ahorrais cambiar las < por ( :wink:

Lo bueno de los divs es que eliminas todos los "comandos" que sirven para indicar al navegador "cómo" has de visualizarse sus contenidos. Así, a buscadores como Google les es más facil leer estos contenidos e indexar las páginas.

Sigo leyendo vuestro hilo...
Jorgens, podrias ponerlo como lectura obligatoria. Porque de esta forma solo lo veran los que entren en este post.
Sigo pensando que no está mal usar tablas para eso. Es lo suyo, pero eso si, pasando todo lo que tenga que ver con el "Aspecto" a la hoja de estilos, es decir:

En lugar de:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th style="text-align: Right;">Nombre:</th>
<td style="padding:5px;"><asp:TextBox id="Nombre" runat="server"/>
</td>
<th style="text-align: Right;">Apellidos:</th>
<td style="padding:5px;"><asp:TextBox id="Apellidos" runat="server"/>
</td>
</tr>
</table>

Esto otro:
<head>
<style>
.formulario {padding:0px ; margin:0px ; border:0px}
.derecha {text-align: right}
.conmargen {padding: 5px}
</style>
</head>
<table class="formulario">
<tr>
<th class="derecha">Nombre:</th>
<td class="conmargen"><asp:TextBox id="Nombre" runat="server"/>
</td>
<th class="derecha">Apellidos:</th>
<td class="conmargen"><asp:TextBox id="Apellidos" runat="server"/>
</td>
</tr>
</table>

O mejor aún:
<head>
<style>
.formulario {padding:0px ; margin:0px ; border:0px}
.formulario th {text-align: right}
.formulario td {padding: 5px}
</style>
</head>
<div class="formulario">
<table>
<tr>
<th>Nombre:</th>
<td><asp:TextBox id="Nombre" runat="server"/></td>
<th>Apellidos:</th>
<td><asp:TextBox id="Apellidos" runat="server"/></td>
</tr>
</table>
</div>

Qué tal? Daos cuenta de que se puede centrar la capa del formulario, darle color de fondo, etc, etc, etc sin más que retocar el estilo .formulario y que si en lugar de definir los estilos dentro del head lo haceis en la hoja de estilo, basta con ponerlo una sola vez o cambiarlo una sola vez para que se aplique a toooodos los formularios de la web :wink:
Si ese ultimo es el que he usado al final, ya puestos tengo una duda que he visto en muchos sitios:
<div id="Contenido">
   El contenido.
</div>
En la hoja de estilo:
#Contenido{...}

La # es normal o es se usa porque es css 2.1???
el # se usa para definir estilos a elementos que son únicos, que solo van a aparecer una sola vez en cada página web. Se definen así en la hoja de estilos:
#loquesea {}
y se declaran así en el html
<div id="loquesea">contenido</dib>

el punto delante del nombre del estilo se usa para indicar un estilo que puede repetirse, una "clase" de estilo. Se definen así en la hoja de estilo:
.loquesea {}
y se declaran así en el html
<div class="loquesea">contenido</dib>
<div class="loquesea">otro contenido, puede haber varios elementos con la misma clase de estilo</dib>

Si lo defines con # hoja de estilo, no funciona si lo declaras con class en el html, y al revés igual. :wink:
Por cierto, solo era un ejemplo lo que pusiste, lo se, pero evita poner mayusculas en los nombres de estilo. Funcionan igual siempre que recuerdes que lo pusiste con la primera en mayuscula, pero si no lo recuerdas no funciona en algunos navegadores, luego colocando el nombre siempre en minuscula no fallas! :wink:
pues menos mal que me lo has dicho, porque simpre uso la nomenclatura Pascal para todos los nombres. Muchas gracias :wink:
Pues toma nota.

Nombres de archivos y estilos siempre en mayuscula
Sin acentos, espacios en blanco ni simbolos raros, solo de la "a" a la "z" (excepto la ñ) y del "0" al "9" y si es necesario guiones medios "-".

Para los nombres de los estilos ademas, nunca han de empezar por un numero.

Creo que es todo... Si no haces eso puede que aún todo funcione, pero no en todos los navegadores. Si sigues esas normas no tendrás problemas, asi que... pra que arriesgarse?

Un saludo!
OS informo que si tras escribir el mensaje activais la casilla de debajo, donde pone "Deshabilitar HTML en este mensaje" os ahorrais cambiar las < por ( Wink

Ahhhh eso no lo sabía :wink: