Emular una tabla con divs y css

[InzaneBoyDoll]

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.

[emprear]

Y el css?

[InzaneBoyDoll]

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

[InzaneBoyDoll]

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

[emprear]

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

[InzaneBoyDoll]

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

[InzaneBoyDoll]

muchas gracias por el interes

[emprear]

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

[InzaneBoyDoll]

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

[furoya]

Iniciado por InzaneBoyDoll

...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