Foros del Web » Creando para Internet » CSS »

Emular una tabla con divs y css

Estas en el tema de Emular una tabla con divs y css en el foro de CSS en Foros del Web. Hola. necesito realizar una maquetacion div, que emule la la forma de una tabla lo siento por no poder mostrar imagenes, pero lo que quiero ...
  #1 (permalink)  
Antiguo 07/07/2011, 11:40
 
Fecha de Ingreso: diciembre-2010
Mensajes: 15
Antigüedad: 6 años, 1 mes
Puntos: 0
Pregunta Emular una tabla con divs y css

Hola. necesito realizar una maquetacion div, que emule la la forma de una tabla

lo siento por no poder mostrar imagenes, pero lo que quiero es algo asi:

EN TABLA
<table border="1" width="30" heigth="30">
<tr heigth="10"><td rowspan="3"> </td></tr>
<tr heigth="10"><td ></td><td></td><td></td></tr>
<tr heigth="10"><td rowspan="3"> </td></tr>
</table>


sin embargo, quisiera hacer esta estructura con divs y estilos, no se si resulte facil, pero despues de un buen rato de intentar y jugar con los estilos ..

<div class="DivDiente" id="MyDiente">
<div class="seccion top" id="t"></div>
<div class="seccion left" id="l"></div>
<div class="seccion center" id="c"></div>
<div class="seccion rigth" id="r"></div>
<div class="seccion bottom" id="b"></div>
</div>





consegui algo parecido.
Sin embargo el error es que un pixel queda en blanco en algunos navegadores, y en Firefox, se descuadra total... si alguien experimentado pueda ayudarme, se lo agradeceria mucho.
  #2 (permalink)  
Antiguo 07/07/2011, 12:23
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 6 meses
Puntos: 1567
Respuesta: Emular una tabla con divs y css

Y el css?


__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 07/07/2011, 13:40
 
Fecha de Ingreso: diciembre-2010
Mensajes: 15
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Emular una tabla con divs y css

perdon, este es el css:

.DivDiente{
border: 1px solid #8BAEB4;
float:left;
background-color:white;
margin:5px;
width: 30px;
height: 33px;
}
.DivDienteG{
border: 1px solid #8BAEB4;
background-color:white;
margin:10px;
width: 100px;
height: 100px;
}
.top,.topG{
width: 100%;
height: 30%;
border-bottom: 1px solid #8BAEB4;
}
.left,.leftG{
width: 33%;
height: 40%;
border-right: 1px solid #8BAEB4;
}
.center,.centerG{
width: 34%;
height: 40%;


}
.rigth,.rigthG{
width: 33%;
height: 40%;
border-left: 1px solid #8BAEB4;
}
.bottom,.bottomG{
width: 100%;
height: 30%;
border-top: 1px solid #8BAEB4;
}



eso le puse a lod divs
  #4 (permalink)  
Antiguo 07/07/2011, 13:42
 
Fecha de Ingreso: diciembre-2010
Mensajes: 15
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Emular una tabla con divs y css

creo que el principal problema es que el borde es exterior, por eso si yo le pongo a un div un tamaño de 100%, con el borde seria 100%+2px; y eso me descuadra todo
  #5 (permalink)  
Antiguo 07/07/2011, 14:26
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 6 meses
Puntos: 1567
Respuesta: Emular una tabla con divs y css

InzaneBoyDoll:
A decir verdad, no entiendo lo que querés hacer,
Primero, que datos querés presentar en esa "tabla", está solo hecha a los efectos de "maquetar"? Bien es posible que necesites una tabla.
Ahora si lo que querés es estructurar el diseño con una serie de divs.

Revisá el uso de la propiedad float en css. Por otro lado, tus porcentajes de los divs contenidos en <div class="DivDiente" id="MyDiente"> será respecto del ancho de div .DivDiente, es decir de esos 30px. Es como que querés hacer una miniatura

Revisá todo o explica mejor el objetivo final


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 07/07/2011, 15:04
 
Fecha de Ingreso: diciembre-2010
Mensajes: 15
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Emular una tabla con divs y css

si, enrealidad es una miniatura, necesito hacer un ODONTOGRAMA, y para esto debo hacer una simulacion de las 6 partes de un diente, cada diente lo estoy representando como un div de 30px, y lo divido en 6 partes (top,left,center,rigth,bottom), enrealidad ninguno de estos 6 divs contiene informacion, solo sirven para pintarse de distintos colores (por ejemplo, si el div top es azul significa que necesita una ortodoncia.. o algo asi)

inicialmente lo hize con tablas, pero crei que seria mejro si lo hacia con divs.


la funcionalidad es masomenos esta: se muestra 36 dientes:(cuadrados de 30x30) divididos en las 6 partes(inicialmente todas en blanco) luego al dar click a cualquiera de esos lados mediante javascript gestiono sus colores.

eh revisado las propiedades de float, pero cuando crei que saldria todo de forma sencilla me eh complicado mucho, y como explique arriba, en firefoz se ve horrible, todo descuadrado : (. lamentablemente no puedo mostrar imagenes por que me han bloqueado las paginas para subirlas
  #7 (permalink)  
Antiguo 07/07/2011, 15:06
 
Fecha de Ingreso: diciembre-2010
Mensajes: 15
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Emular una tabla con divs y css

muchas gracias por el interes
  #8 (permalink)  
Antiguo 07/07/2011, 15:21
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 6 meses
Puntos: 1567
Respuesta: Emular una tabla con divs y css

InzaneBoyDoll:

Ahora esta más claro. Es algo muy específico. Si ver el contenido es dificil imaginarlo, pero dado el caso no creo que sea tan grave prersentarlo con una tabla.

Para hacerlo con divs necesitarias

Un div contenedor

dentro de este 2 divs con float: left;
en el segundo, que estaria a la derecha poner , (segun lo que se ve en la tabla) 4 divs mas, tres arriba con float:left, hacer un clear y poner otro debajo.
Sinceramente no creo que se justifique, optaría por la tabla, si es exclusivamente para esto. un detalle dentro de las celdas, aunque esten vacias, pone un contenido para que el navegador renderice correctamente, aunque más no sea un espacio en blanco (&nbsp;)

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 07/07/2011, 15:41
 
Fecha de Ingreso: diciembre-2010
Mensajes: 15
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Emular una tabla con divs y css

yo tmb me sentia mas comodo con la tabla, pero viendo que por todo sitio le dicen no a las tablas, estoy medio psicoseado xD.

intentare con lo que me recomiendas y con lo del espacio.


Gracias por tu tiempo.

Saludos
  #10 (permalink)  
Antiguo 13/07/2011, 14:19
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 2 meses
Puntos: 317
Respuesta: Emular una tabla con divs y css

Cita:
Iniciado por InzaneBoyDoll Ver Mensaje
...viendo que por todo sitio le dicen no a las tablas...
Ésa es una burrada que ya creí superada hace años.

Las tablas están para usarse. Puede que resulte algo reprobable que las pongan para maquetar una página, pero es obligatorio usarlas para tabular datos. Y un mapa de dentaduras se parece mucho a una tabla. No creo que nadie te critique si la usas.

Dando el formato de tabla con div

Etiquetas: estilos, float, rowspan, table
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:16.