Foros del Web » Creando para Internet » HTML »

Como poner dos tablas una al lado de la otra cuando caben y si no no

Estas en el tema de Como poner dos tablas una al lado de la otra cuando caben y si no no en el foro de HTML en Foros del Web. Necesito que, si hay espacio, aparezca una tabla al lado de la otra y si no (porque la ventana o la pantalla es chica) aparezcan ...
  #1 (permalink)  
Antiguo 10/03/2011, 19:00
 
Fecha de Ingreso: marzo-2011
Mensajes: 6
Antigüedad: 6 años, 9 meses
Puntos: 0
Mensaje Como poner dos tablas una al lado de la otra cuando caben y si no no

Necesito que, si hay espacio, aparezca una tabla al lado de la otra y si no (porque la ventana o la pantalla es chica) aparezcan una abajo de la otra. De la misma manera que cuando uno pone dos imágenes una al lado de la otra (si no entran la segunda baja).

O sea poniendo
<img src="..."> <img src="..."> aparecen las dos imágenes una al lado de la otra (salvo que no entren en la ventana, en cuyo caso la seguna baja)

¿Cómo hacer esto con dos tablas?

Ej:
Código HTML:
<table>
  <tr><td>primera tabla</td></tr>
  <tr><td>de dos renglones</td></tr>
</table> <table>
  <tr><td>segunda tabla</td></tr>
  <tr><td>esta abajo</td></tr>
</table> 
No me sirve la solución de poner ambas tablas dentro de una tabla, porque no se comporta como deseo cuando el ancho de la ventana es menor que la suma de las dos tablas, donde sí se tiene que ver abajo.

¿Alguien puede ayudarme?

Gracias.

Emilio
  #2 (permalink)  
Antiguo 11/03/2011, 04:49
Avatar de Kamae  
Fecha de Ingreso: abril-2008
Ubicación: Barcelona (Catalunya)
Mensajes: 307
Antigüedad: 9 años, 7 meses
Puntos: 13
Respuesta: Como poner dos tablas una al lado de la otra cuando caben y si no no

Buenas!

Igual hay otras formas de hacerlo, yo te digo la que acabo de comprobar que funciona.

Código PHP:
<div style="float:left;">
    <
table>
      <
tr><td>primera tablaaaaaaaaaa</td></tr>
      <
tr><td>de dos renglonesssssssss</td></tr>
    </
table>
</
div>
<
div style="float:left;">
    <
table>
      <
tr><td>segunda tablaaaaaaaaaa</td></tr>
      <
tr><td>esta abajoooooooooo</td></tr>
    </
table>
</
div
Coje la ventana del navegador y redimensiónala haciéndola grande y pequeña, y verás como cuando conviene, la tabla 2 pasa a abajo y cuando no, se queda arriba.

El tema de los divs yo estoy aprendiendo a usarlos. Es rebuscadillo y complicao de entender al principio pero supongo que como todo lo importante es la práctica de usarlo.
Básicamente lo que haces es poner dos capas flotantes una detrás de otra (float:left;), y como por defecto, si no me equivoco, los divs vienen definidos con posición relativa (position:relative;), se redimensionan con el tamaño de la ventana.

Comprueba que si pones "position:absolute;" las capas se mantienen estáticas independientemente del tamaño del navegador.

Código PHP:
<div style="float:left;">
    <
table>
      <
tr><td>primera tablaaaaaaaaaa</td></tr>
      <
tr><td>de dos renglonesssssssss</td></tr>
    </
table>
</
div>
<
div style="float:left; position:absolute; left:200px;">
    <
table>
      <
tr><td>segunda tablaaaaaaaaaa</td></tr>
      <
tr><td>esta abajoooooooooo</td></tr>
    </
table>
</
div
Espero que te sirva, aunque no sé si te interesa que una vez determinado si cabe al lado o no la segunda tabla, se coloque donde le toque y no se mueva... para lo cuál no se me ocurre solución.
Por contra, si es lo que te interesa, tienes más info en google buscando por DIVs ;)

Saludos!
  #3 (permalink)  
Antiguo 11/03/2011, 17:24
 
Fecha de Ingreso: marzo-2011
Mensajes: 6
Antigüedad: 6 años, 9 meses
Puntos: 0
De acuerdo Respuesta: Como poner dos tablas una al lado de la otra cuando caben y si no no

Gracias. Sí, anda, acabo de probar otra opción. Puse style="display:inline" dentro de cada elemento <table> y anduvo bien (sin necesidad de los <div>).

Luego probé tu opción modificada, le puse style="float:left" dentro del <table> sin los <div> y también anduvo.

Otra vez gracias.

Etiquetas: ancho, posicionamiento, tablas
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 16:42.