Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/05/2013, 17:02
Avatar de _Edgar
_Edgar
 
Fecha de Ingreso: abril-2013
Ubicación: Estado de México
Mensajes: 7
Antigüedad: 11 años
Puntos: 0
¿Como maquetar esto?

Hola amigos, tengo el siguiente problema, maquetar un formato clínico, pero me pidieron que lo haga solamente usando tablas, sin meter absolutamente nada de CSS, a la persona que me encargo este formato, le explique que seria mucho mejor si lo hago usando <div></div> y dando posicionamiento con la hoja de éstilo, pero a fuerzas lo quiere con tablas.

El formato, visualmente es el siguiente.







He leído que las tablas solamente deben usarse cuando se muestre información tabulada, por más que veo este formato, no le encuentro lo tabulado, intente lo siguiente, para la primera fila del formato:

Dentro de las etiquetas table, meter filas, a esas fias hacer divisiónes para las columnas, en cada columna, meter el texto correspondiente de acuerdo al formato clínico que se requiere.

Código HTML:
<table border="0" width="1200">

         <tbody>

            <tr>

               <th>Historia clínica perinatal - CLAP/SMR -OPS/OMS</th>

               <th>Fecha de nacimiento</th>

               <th>Etnia</th>

               <th>Alfa Beta</th>

               <th>Estudios</th>

               <th>Estado Civil</th>

               <th>Lugar del control parental</th>

               <td><input name="" type="text"></td>

            </tr>

            <tr>

               <td>Nombre<input name="" type="text" size="10">Apellido<input name="" type="text" size="10"></td>

               <td>Día Mes Año</td>

               <td>Blanca<input name="" type="radio"></td>

               <td>No<input name="" type="radio"></td>

               <td>Ningúno<input name="" type="radio"></td>

               <td>Casada<input name="" type="radio"></td>

               <th align="left">Lugar del parto/aborto</th>

               <td><input name="" type="text"></td>

            </tr>

            <tr>

               <td>Domicilio<input name="" type="text"></td>

               <td><input name="" type="text" size="1"><input name="" type="text" size="1"><input name="" type="text" size="1"></td>

               <td>Indigena<input name="" type="radio"></td>

               <td>Si<input name="" type="radio"></td>

               <td>Primaria<input name="" type="radio"></td>

               <td>Unión estable<input name="" type="radio"></td>

               <th align="left">No Identidad</th>

               <td><input name="" type="text"></td>

            </tr>

            <tr>

               <td rowspan="2">Localidad<input name="" type="text" size="10">Telefono<input name="" type="telefono" size="5"></td>

               <td rowspan="2">Edad<input name="" type="text" size="3"><input name="" type="radio"></td>

               <td>Mestiza<input name="" type="radio"></td>

               <td>&nbsp;</td>

               <td>Secundario<input name="" type="radio"></td>

               <td>Soltera<input name="" type="radio"></td>

            </tr>

            <tr>

               <td>Negra<input name="" type="radio"></td>

               <td>&nbsp;</td>

               <td>Universidad<input name="" type="radio"></td>

               <td>Otro<input name="" type="radio"></td>

            </tr>

            <tr>

               <td>&nbsp;</td>

               <td>&nbsp;</td>

               <td>&nbsp;</td>

               <td>&nbsp;</td>

               <td>Años en el mayor nivel<input name="" type="text" size="5"></td>

               <th>Vive sola Sí<input name="" type="radio">No<input name="" type="radio"></th>

            </tr>

         </tbody>

      </table> 
Así se ve lo que llevo (muy feo por cierto)



Solamente es la parte que llevo hasta el momento, pero, cuando requiero más filas, y dichas filas requieren mas columnas, mis contenidos anteriores se descuadran adaptandose a la cantidad de columnas de las filas posteriores.

Tengo una idea para solucionar este problema, pero creo que esto es incorrecto.
Seria algo como lo suiguiente:

Código HTML:
<table>
   <tr>
      <td></td>
      <td></td>
   </tr>
</table>

<table>
   <tr>
      <td></td>
      <td></td> 
   </tr>
</table>

<table>
   <tr>
      <td></td>
      <td></td>
   </tr>
</table> 
Explico, por cada fila del formato clínico, hacer una tabla, que dicha tabla contenga sus filas y columnas correspondientes al formato.

Pero ¿Usar tablas para hacer un formato como el que muestro, es lo correcto, o lo correcto sería hacerlo con div?.

:O