Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Dos tablas una al lado de otra centradas, es posible ? en el foro de CSS en Foros del Web. Hola, necesito que 2 tablas esten en el centro y contiguas, asi: BODY info... T1 y T2 info... /BODY Es posible ? He probado asi: ...
  #1 (permalink)  
Antiguo 23/12/2006, 12:15
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 5 meses
Puntos: 1
Dos tablas una al lado de otra centradas, es posible ?

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.
  #2 (permalink)  
Antiguo 23/12/2006, 12:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Dos tablas una al lado de otra centradas, es posible ?

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.
  #3 (permalink)  
Antiguo 23/12/2006, 12:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Dos tablas una al lado de otra centradas, es posible ?

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.
  #4 (permalink)  
Antiguo 23/12/2006, 13:58
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 5 meses
Puntos: 1
Re: Dos tablas una al lado de otra centradas, es posible ?

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.
  #5 (permalink)  
Antiguo 23/12/2006, 15:08
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 5 meses
Puntos: 1
Re: Dos tablas una al lado de otra centradas, es posible ?

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
  #6 (permalink)  
Antiguo 23/12/2006, 15:56
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 5 meses
Puntos: 1
Re: Dos tablas una al lado de otra centradas, es posible ?

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 ?...
  #7 (permalink)  
Antiguo 23/12/2006, 16:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Dos tablas una al lado de otra centradas, es posible ?

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.
  #8 (permalink)  
Antiguo 23/12/2006, 17:22
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 5 meses
Puntos: 1
Re: Dos tablas una al lado de otra centradas, es posible ?

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
  #9 (permalink)  
Antiguo 23/12/2006, 17:45
Avatar de MC PLAGA  
Fecha de Ingreso: mayo-2006
Ubicación: Toluca, Mexico
Mensajes: 240
Antigüedad: 11 años, 6 meses
Puntos: 4
Re: Dos tablas una al lado de otra centradas, es posible ?

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?
__________________
Plaga Blog
  #10 (permalink)  
Antiguo 23/12/2006, 18:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Dos tablas una al lado de otra centradas, es posible ?

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.
  #11 (permalink)  
Antiguo 23/12/2006, 18:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Dos tablas una al lado de otra centradas, es posible ?

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.
  #12 (permalink)  
Antiguo 23/12/2006, 18:30
Avatar de MC PLAGA  
Fecha de Ingreso: mayo-2006
Ubicación: Toluca, Mexico
Mensajes: 240
Antigüedad: 11 años, 6 meses
Puntos: 4
De acuerdo Re: Dos tablas una al lado de otra centradas, es posible ?

Cita:
Iniciado por Mikmoro Ver Mensaje
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
__________________
Plaga Blog
  #13 (permalink)  
Antiguo 23/12/2006, 18:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Dos tablas una al lado de otra centradas, es posible ?

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.
  #14 (permalink)  
Antiguo 20/01/2007, 09:42
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 5 meses
Puntos: 1
Re: Dos tablas una al lado de otra centradas, es posible ?

Gracias Mikmorro.

Pero seguimos sin tener las 2 tablas con texto dinamico y centradas...
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 23:15.