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

[tuteba]

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

[Kamae]

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!

[tuteba]

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.