Página 1 de 2 12 ÚltimoÚltimo
Resultados 1 al 10 de 11

Tema: Ayuda html, construir tabla con div

  1. #1
    Vive aquí Avatar de IvanDj
    Ubicación
    Valencia
    Mensajes
    736

    Predeterminado Ayuda html, construir tabla con div

    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.
    ASRock P67 Pro3 B3 -- i5 2500K -- Thermalright HR-02 Macho -- Cooler Master CM-690 II Advanced USB 3.0 -- X-Strike 500w modular -- Gigabyte GeForce GTX 780 OC 3GB GDDR5 -- G.Skill Sniper DDR3 1866 PC3-14900 8GB 2x4GB CL9 -- LG 22EN33S-B -- LCD Samsung 32" -- Samsung 840 Evo SSD Series 120GB SATA3 -- 3 x 500GB Seagate Barracuda SATA-300 32MB 7200.11 -- A4tech XL-755BK Oscar 3600Dpi Láser Gaming Mouse -- B-Move Burst Gaming Keyboard

  2. #2
    Master Avatar de skabeche
    Ubicación
    Unas veces en Benicàssim y otras en Oviedo
    Mensajes
    1,552

    Predeterminado Re: Ayuda html, construir tabla con div

    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.
    SKIZOPHONIC
    Web de mi grupo: www.skizophonic.es
    Facebook de mi grupo: www.facebook.com/skizophonic
    Escúchanos en Spotify: Skizophonic en Spotify

    Si yo no soy Curro Jiménez ¿Por qué tengo este trabuco?

  3. #3
    El señor de los forillos Avatar de oMega_3097
    Ubicación
    León, España
    Edad
    26
    Mensajes
    3,124

    Predeterminado Re: Ayuda html, construir tabla con div

    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).
    Conecta conmigo en mi web personal: http://josejfernandez.com, me dedico al desarrollo web.

  4. #4
    Master Avatar de skabeche
    Ubicación
    Unas veces en Benicàssim y otras en Oviedo
    Mensajes
    1,552

    Predeterminado Re: Ayuda html, construir tabla con div

    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.
    SKIZOPHONIC
    Web de mi grupo: www.skizophonic.es
    Facebook de mi grupo: www.facebook.com/skizophonic
    Escúchanos en Spotify: Skizophonic en Spotify

    Si yo no soy Curro Jiménez ¿Por qué tengo este trabuco?

  5. #5

    Predeterminado Re: Ayuda html, construir tabla con div

    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.

  6. #6

    Predeterminado Re: Ayuda html, construir tabla con div

    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.

  7. #7
    El señor de los forillos Avatar de oMega_3097
    Ubicación
    León, España
    Edad
    26
    Mensajes
    3,124

    Predeterminado Re: Ayuda html, construir tabla con div

    Cita Iniciado por skabeche Ver mensaje
    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.
    Conecta conmigo en mi web personal: http://josejfernandez.com, me dedico al desarrollo web.

  8. #8

    Predeterminado Re: Ayuda html, construir tabla con div

    el k use capas pa hacer tablas es masoquista :P

  9. #9
    Sin vida social
    Ubicación
    Detrás de tí
    Edad
    30
    Mensajes
    206

    Predeterminado Re: Ayuda html, construir tabla con div

    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!
    [Desktop] Asus M2N SLI Deluxe - AMD Athlon II X4 640@3.3Ghz - 4x1GB Geil DDR2 800mhz - Gigabyte GTX460 OC 1GB GDDR5 - 2x320GB SATA2 - Dell 23" SP2309W - BenQ FP222Wa 22" Wide.
    [Laptop] Asus UL30VT-A1

  10. #10
    Master Avatar de skabeche
    Ubicación
    Unas veces en Benicàssim y otras en Oviedo
    Mensajes
    1,552

    Predeterminado Re: Ayuda html, construir tabla con div

    Cita Iniciado por oMega_3097 Ver mensaje
    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.

    Cita Iniciado por nils Ver mensaje
    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.
    SKIZOPHONIC
    Web de mi grupo: www.skizophonic.es
    Facebook de mi grupo: www.facebook.com/skizophonic
    Escúchanos en Spotify: Skizophonic en Spotify

    Si yo no soy Curro Jiménez ¿Por qué tengo este trabuco?

Página 1 de 2 12 ÚltimoÚltimo

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •