Dos tablas una al lado de otra centradas, es posible ?

MonicaH · #1 (**permalink**) 23/12/2006, 12:15

Hola, necesito que 2 tablas esten en el centro y contiguas, asi:

BODY
info...
T1 y T2
info...
/BODY

Es posible ?

He probado asi:

Código HTML:

<div style="border:5px solid green; margin:auto;">
<table border="1" style="float:left;"><tr><td>2</td></tr></table>
<table border="1" style="margin:auto;"><tr><td>1</td></tr></table>
<table border="1" style="float:left;"><tr><td>2</td></tr></table>
</div>

y como ven, no funciona.

Mikmoro · #2 (**permalink**) 23/12/2006, 12:31

Buenas.
Lo más lógico me parece anidar las dos tablas dentro de otra, si no, creo que no es posible poner dos tablas una al lado de la otra, a no ser que estén en un contenedor, como un div u otra tabla. Prueba con esto:

<body>
<table border="0" cellpadding="0" cellspacing="0"
width="100%">
<tbody>
<tr>
<td style="width: 50%; vertical-align: top;">
<table border="1" cellpadding="0" cellspacing="0"
width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 50%; vertical-align: top;">
<table border="1" cellpadding="0" cellspacing="0"
width="100%">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>

Mikel.

Mikmoro · #3 (**permalink**) 23/12/2006, 12:47

O bien esto si prefieres hacerlo con divs:

<body>
<div style="border: 5px solid green; margin: auto;">
<div style="float: left; width: 50%;">
<table border="1" width="100%">
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<div style="float: left; width: 50%;">
<table border="1" width="100%">
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<div style="clear: both;"></div>
</div>
</body>

Mikel.

MonicaH · #4 (**permalink**) 23/12/2006, 13:58

Gracias por el intento,

el proposito es hacerlo SIN 3 TABLAS.
Y mira el comportamiento de tu CF:

Código HTML:

<body>
<div style="border: 5px solid green; margin: auto;">
<div style="float: left; width: 50%;">
<table border="1">
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<div style="float: left; width: 50%;">
<table border="1">
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<div style="clear: both;"></div>
</div>
</body>

Claro, he quitado el 100% por que con él no quedan centradas sino ocupando el 100% del BODY.

Gracias.

Si, deben ser 2 tablas en el centro anidadas en un DIV, pero no se como centrarlas, y NO DEBEN ESTAR DENTRO de una TERCERA TABLA.

Eres muy amable por tu tiempo.

MonicaH · #5 (**permalink**) 23/12/2006, 15:08

Sí que es posible!!

...No se que me pasaba...

La solución es el conocido atributo display:line;

Aqui estan las 2 tablas centradas:

Código HTML:

<div style="border:1px solid red;margin:auto;text-align:center;">
<table border="1" style="margin:auto;display:inline;"><tr><td>11111111111111</td></tr></table>
<table border="1" style="display:inline;"><tr><td>222222222222</td></tr></table>
</div>

Gracias por ayudarme Mikmoro

MonicaH · #6 (**permalink**) 23/12/2006, 15:56

Pero tiene un problema grave...

Y no se soluciona con vertical-align:top;:

Código HTML:

<div style="border:1px solid red;margin:auto;text-align:center;">
<table border="1" style="background:#aabbcc;margin:auto;display:inline;"><tr><td>11111111111111<br />11111111111111<br />11111111111111<br />11111111111111<br />11111111111111<br />11111111111111<br /></td></tr></table>
<table border="1" style="background:pink;display:inline;"><tr><td>222222222222<br />222222222222<br />222222222222<br />222222222222<br /></td></tr></table></div>

Alguien puede darnos una mano ?...

Mikmoro · #7 (**permalink**) 23/12/2006, 16:59

Lo mejor es siempre ser lo más explícito posible al hacer una consulta.

En el segundo ejemplo que te he puesto, que comentas que has tenido que quitar el 100%, porque evidentemente ocupará todo el ancho del body, no es el 100% de las tablas lo que hace que ocupen todo el ancho del body, sino que los dos divs tienen un 50% cada uno, y sobre todo que el div principal no tiene tamaño definido; simplemente mateniendo el margin: auto y dando el porcentaje o el tamaño que quieras al contenedor principal (primer div), tendrías las tablas al ancho que te interese y centradas en la página.
Las tablas tienen cada una el 100% de su contenedor, que puede tener el tamaño que quieras.

Prueba esto:

Código:

<body>
<div style="border: 5px solid green; margin: auto; width: 30%;">
<div style="float: left; width: 50%;">
<table border="1" width="100%" style="background:#aabbcc;">
<tr>
<td>11111111111111<br />
11111111111111<br />
11111111111111<br />
11111111111111<br />
11111111111111<br />
11111111111111<br />
</td>
</tr>
</table>
</div>
<div style="float: left; width: 50%;">
<table border="1" width="100%" style="background:pink;">
<tr>
<td>222222222222<br />
222222222222<br />
222222222222<br />
222222222222<br />
</td>
</tr>
</table>
</div>
<div style="clear: both;"></div>
</div>
</body>

Y el problema de la alineación vertical está resuelto. Pero tampoco estoy seguro de que sea esto lo que quieres conseguir. Ya me dirás.

Mikel.

MonicaH · #8 (**permalink**) 23/12/2006, 17:22

Date cuenta que no funciona si cambias el texto:

Código PHP:

  <body> <div style="border: 5px solid green; margin: auto; width: 30%;"> <div style="float: left; width: 50%;"> <table border="1" width="100%" style="background:#aabbcc;"> <tr> <td>11111111111111<br /> 11111111111111<br /> 11111111111111<br /> 11111111111111<br /> 11111111111111<br /> 111111111111111111111111111111111111111111<br /> </td> </tr> </table> </div> <div style="float: left; width: 50%;"> <table border="1" width="100%" style="background:pink;"> <tr> <td>222222222222<br /> 222222222222<br /> 222222222222<br /> 222222222222<br /> </td> </tr> </table> </div> <div style="clear: both;"></div> </div> </body>

Es claro que el texto va a cambiar por eso no debe estar AMARRADO el width

MC PLAGA · #9 (**permalink**) 23/12/2006, 17:45

Perdon por cambiar algo el tema pero tengo una pequeña duda que me acaba de surgir.
Cual es la diferencia entre tabla y div?

Mikmoro · #10 (**permalink**) 23/12/2006, 18:26

Ah, de acuerdo. Pero míralo con este texto, reemplazando tu última línea:
11111111 111 11111111 11111111111111 111111111<br />

Eso ocurre porque no encuetra corte entre el texto para enviarlo a la siguente línea. A no ser que vayas a usar palabras gigantes y enormes ristras de números, en el momento que encuetre un corte en el texto, pasará a la siguiente línea cuando lo necesite, como en un editor de texto. Prúebalo con lo que vayas a meter de verdad.
Y ya de paso: ¿cuál es la razón de que quieras que sean tablas, si no es mucho preguntar?

Mikel.

Mikmoro · #11 (**permalink**) 23/12/2006, 18:28

Para MC PLAGA:
pues básicamente que las tablas suelen ser cuadrículas que se usan para mostrar datos tabulados (en filas y columnas), y los div son simples cajas contenedoras de cualquier cosa (texto, imágenes, tablas, otros divs, etc.).

Mikel.

MC PLAGA · #12 (**permalink**) 23/12/2006, 18:30

Cita:

Iniciado por Mikmoro

Para MC PLAGA:
pues básicamente que las tablas suelen ser cuadrículas que se usan para mostrar datos tabulados (en filas y columnas), y los div son simples cajas contenedoras de cualquier cosa (texto, imágenes, tablas, otros divs, etc.).

Mikel.

ohh gracias por contestar

Mikmoro · #13 (**permalink**) 23/12/2006, 18:37

Y por cierto, Mónica: a la solución que aportabas de display:inline, si le aplicas esa ristra de unos que has puesto, muy centradas las tablas no te iban a quedar.

Mikel.

MonicaH · #14 (**permalink**) 20/01/2007, 09:42

Gracias Mikmorro.

Pero seguimos sin tener las 2 tablas con texto dinamico y centradas...