Ayuda html, construir tabla con div

[IvanDj]

Buenas a todos! Tengo que construir una tabla mediante div, similar a esta que he hecho mediante table:

<TABLE>
<TR id="f1">
<TD></TD><TD></TD><TD></TD><TD>O</TD><TD></TD><TD></TD><TD></TD>
</TR>
<TR id="f2">
<TD></TD><TD></TD><TD>O</TD><TD></TD><TD>O</TD><TD></TD><TD></TD>
</TR>
<TR id="f3">
<TD></TD><TD>O</TD><TD></TD><TD>O</TD><TD></TD><TD>O</TD><TD></TD>
</TR>
<TR id="f4">
<TD>O</TD><TD></TD><TD>O</TD><TD></TD><TD>O</TD><TD></TD><TD>O</TD>
</TR>
</TABLE>

Llevo un rato intentandolo, y no me sale, me estoy liando un poco y me gustaria que me echarais un cable. Os pongo lo que llevo hecho para ver si me podeis ayudar:

<DIV id="f1" STYLE="position:absolute; left:600px; top:140px; ">
<P> O </P>
</DIV>

<DIV id="f2">
<DIV id="f2" STYLE="position:absolute; left:700px; top:290px; ">
<P> O </P>
</DIV>
<DIV id="f2" STYLE="position:absolute; left:50px; top:90px; ">O</DIV>
<DIV id="f2" STYLE="position:absolute; left:100px; top:90px; ">O</DIV>
</DIV>

La idea es dibujar una especie de triangulo de Pitagoras, y luego segun apretes un numero u otro de unos formularios, se tendran que iluminar las O que forman la suma de dicho numero.

Un saludo! Si teneis cualquier duda acerca de la explicacion, preguntar.

[skabeche]

No entiendo porque quieres emular una tabla con DIV's.

Aparte en el codigo de los div's tienes asignado id's a mas de un elemento. Los id's es para identificar un unico elemento en html, es decir, solo se puede utilizar una vez por pagina. Las clases (class) es al contrario, puedes utilizarlos tantas veces como quieras.

Salu2.

[oMega_3097]

Creo que aNieto2K publicó hace un mes o así justo lo que tú pides. Pero me parece mucho mejor hacerlo con la tabla (lo de los divs se lleva mucho ahora, intentar tablear a base de capas me parece pasarse con la moda de las capitas) que a base de capas. Para algo se hicieron las tablas, precisamente para hacer tablas (y no ahorras tanto código usando divs, creo de hecho que al contrario).

[skabeche]

La utilización de capas, más que una moda, es una necesidad real. En terminos generales, si se "juega" bien con ellas (junto con CSS y la preocupacion del desarrollador), puedes separar mas facilmente el marcado del contenido, tener una mejor accesibilidad, además de conseguir una semántica entendible, y como no, pues manejar menor codigo en la pagina HTML, por lo que repercute en un peso menor de la pagina y un trafico mas ligero.

Como dato aclaratorio, las capas en realidad se deberian llamar "divisiones", de ahi que venga su etiqueta <div>.

Las tablas para datos tabulares y los div's para dividir la estructura de la pagina. Como te dicen si intentas emular una tabla mediante capas no estas ahorrando codigo y es mas dificil de mantener y construir.

Salu2.

[Kurroman]

Eso si, para aprender en condiciones diseño sin tablas, prepárate unas buenas aspirinas. Especialmente con el IE.

Aunque al final merece y mucho la pena.

[jorllazo]

Hola Soy nuevo por aqui, pero en esto igual puedo ayudar.

http://dotpress.wordpress.com/2007/0...vs-ejemplo-ii/

Mira este ejemplo. ... es muy bueno, por lo menos a mi me ha servido de mucho en mis desarrollos.

Espero te sirva.

[oMega_3097]

La utilización de capas, más que una moda, es una necesidad real. En terminos generales, si se "juega" bien con ellas (junto con CSS y la preocupacion del desarrollador), puedes separar mas facilmente el marcado del contenido, tener una mejor accesibilidad, además de conseguir una semántica entendible, y como no, pues manejar menor codigo en la pagina HTML, por lo que repercute en un peso menor de la pagina y un trafico mas ligero.

Sí, estoy totalmente de acuerdo en eso, pero me refería a moda porque es cierto que se lleva mucho intentar "capearlo" todo, aun lo que se puede hacer con etiquetas específicas en HTML, la muestra de ello es la intención de crear tablas mediante etiquetas div, en lugar de mediante table.

[Kurroman]

el k use capas pa hacer tablas es masoquista :P

[nils]

Para crear columnas con los divs lo puedes hacer así:
<div id="col1" style="float:left">col1</div>
<div id="col2" style="float: left">col2</div>
<div id="col3">col3</div>
<div id="col4" style="float:right">col4</div>
<div id="fix" style="clear:both"></div>

Con la ultima linea evitas que los siguiente elementos se desposicionen, por decirle de alguna manera.

Si quieres crear tanto columnas como filas de igual tamaño para emular una tabla tendrás que usar dimensiones fijas con width y height en el css.

Lo bueno de usar capas en vez de tablas para un diseño es que es mucho más fácil modificar las capas que una tabla para poder mejorar, cambiar o modificar un diseño.

Los buscadores indexan mejor la información que hay en capas, por eso si haces una página web pública con información que quieras compartir se recomienda usar capas.

Un saludo!

[skabeche]

Sí, estoy totalmente de acuerdo en eso, pero me refería a moda porque es cierto que se lleva mucho intentar "capearlo" todo, aun lo que se puede hacer con etiquetas específicas en HTML, la muestra de ello es la intención de crear tablas mediante etiquetas div, en lugar de mediante table.

Estoy completamente de acuerdo contigo. Hay un término que define esto y es "divitis" que lo acuño Jeffrey Zeldman. A veces intentando hacer lo correcto, podemos provocar sin querer el efecto contrario.

Para crear columnas con los divs lo puedes hacer así:
<div id="col1" style="float:left">col1</div>
<div id="col2" style="float: left">col2</div>
<div id="col3">col3</div>
<div id="col4" style="float:right">col4</div>
<div id="fix" style="clear:both"></div>

Con la ultima linea evitas que los siguiente elementos se desposicionen, por decirle de alguna manera.

Si quieres crear tanto columnas como filas de igual tamaño para emular una tabla tendrás que usar dimensiones fijas con width y height en el css.

Lo bueno de usar capas en vez de tablas para un diseño es que es mucho más fácil modificar las capas que una tabla para poder mejorar, cambiar o modificar un diseño.

Los buscadores indexan mejor la información que hay en capas, por eso si haces una página web pública con información que quieras compartir se recomienda usar capas.

Un saludo!

No me parece una solucion crear tablas mediante capas. Para algo estan las tablas si se usan correctamente. No estas ahorrando codigo con la solucion que planteas, es dificil de mantener, de entender, ademas estas incorporando los estilos dentro del codigo de marcado, siendo esto totalmente desaconsejado. Las tablas si se utilizan bien, son muy potentes y pueden ser igual de accesibles que hacerlo con capas. Cada cosa para lo que esta destinado.

Los buscadores no te van indexar por mucho que hayas hecho la pagina con capas. Lo que se necesita es tener los conocimientos suficientes para aplicar cada etiqueta html en el lugar que le corresponde y tener una semantica correcta y saber separar presentacion de marcado. Por ejemplo, si vas a poner un titulo utiliza la etiqueta de encabezado <hn> y siguiendo un orden jerarquico estricto, no puedes poner un <h2> antes de un <h1>, por ej. O utilizar la etiqueta <address> para direcciones. O tambien utiliza una frase que describan tu sitio (sin pasarse) por ejemplo en el titulo de la pagina. Y por supuesto sin hacer trampas.

Creo que lei hace tiempo (no se si me equivoco) que las capas se renderizaban mas lentamente que las tablas, pero no lo recuerdo bien, que alguien me corrija si me equivoco.

Mi intencion no es de ir de listillo, ni doy lecciones a nadie. Lo que no quiero es que la gente se confunda. Y por supuesto todavia me falta mucho por aprender.

Siento este post de rollo. Salu2.