posicionamiento de tablas :S

[shembao]

hola como lo puedo hacer para posicionar las tablas UNAS AL LADO DE LA OTRA y no abajo de la otra




el codigo es:

<div class="alex" style="position:relative">
<table width="30%" border="1" cellspacing="1">
<caption>Flujo de Ingreso/Salida</caption>
<tr >
<th width="39%" scope="col"><div align="left">Tipo Registro</div></th>
<th width="20%" scope="col"><div align="left">%</div></th>
<th width="40%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingreso</div></th>
<td><? echo porcentaje($total[0],$ingresos[0]) ?></td>
<td><? echo $ingresos[0] ?></td>
</tr>
<tr>
<th scope="row"><div align="left">Salida</div></th>
<td><? echo porcentaje($total[0],$salidas[0]) ?></td>
<td><? echo $salidas[0] ?></td>
</tr>
<tr >
<th scope="row"><div align="left">Total</div></th>
<td><? echo porcentaje($total[0],$total[0]) ?></td>
<td><? echo $total[0] ?></td>
</tr>
</table>


<table width="30%" border="1" cellspacing="1">
<caption>Flujo de Ingreso/Salida</caption>
<tr >
<th width="39%" scope="col"><div align="left">Tipo Registro</div></th>
<th width="20%" scope="col"><div align="left">%</div></th>
<th width="40%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingreso</div></th>
<td><? echo porcentaje($total[0],$ingresos[0]) ?></td>
<td><? echo $ingresos[0] ?></td>
</tr>
<tr>
<th scope="row"><div align="left">Salida</div></th>
<td><? echo porcentaje($total[0],$salidas[0]) ?></td>
<td><? echo $salidas[0] ?></td>
</tr>
<tr >
<th scope="row"><div align="left">Total</div></th>
<td><? echo porcentaje($total[0],$total[0]) ?></td>
<td><? echo $total[0] ?></td>
</tr>
</table>
</div>

[Mikmoro]

Puedes añadir a tu css:

table {float: left;}

[shembao]

Iniciado por Mikmoro

Puedes añadir a tu css:

table {float: left;}

tienes razon muchas gracias ... pero ahora me quedo así



como lo hago para dejarle un espacio entre ellos
el css es :

.alex table, .alex td
{
border : 1px solid #CCC;
border-collapse : collapse;
font : small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}
.alex table
{
float:left;
border :none;
border :1px solid #CCC;
}
.alex thead th,
.alex tbody th
{
background : #FFF url(th_bck.gif) repeat-x;
color : #666;
padding : 5px 10px;
border-left : 1px solid #CCC;
}
.alex tbody th
{
background : #fafafb;
border-top : 1px solid #CCC;
text-align : left;
font-weight : normal;
}
.alex tbody tr td
{
padding : 5px 10px;
color : #666;
}
.alex tbody tr:hover
{
background : #FFF url(tr_bck.gif) repeat;
}

.alex tbody tr:hover td
{
color : #454545;
}
.alex tfoot td,
.alex tfoot th
{
border-left : none;
border-top : 1px solid #CCC;
padding : 4px;
background : #FFF url(foot_bck.gif) repeat;
color : #666;
}
.alex caption
{
text-align : left;
font-size : 120%;
padding : 10px 0;
color : #666;
}
.alex table a:link
{
color : #666;
}
.alex table a:visited
{
color : #666;
}
.alex table a:hover
{
color : #003366;
text-decoration : none;
}
.alex table a:active
{
color : #003366;
}

[Mikmoro]

Puedes darle un margin-left o right, lo que te convenga por el resto del diseño.

.alex table {float:left;
border :1px solid #CCC;
margin-left: 20px;
}

(te quito el border none, porque border:none y luego declarar un borde tiene poco sentido)

[shembao]

Iniciado por Mikmoro

Puedes darle un margin-left o right, lo que te convenga por el resto del diseño.

.alex table {float:left;
border :1px solid #CCC;
margin-left: 20px;
}

(te quito el border none, porque border:none y luego declarar un borde tiene poco sentido)

te pasaste muchas gracias!!!
ddemasiadas gracias!!

saludos

[Mikmoro]

De nada, es un placer.

Saludos.

[danistrein]

¬¬ por que nunka llego a time para ayudar a resolver sus problemas

a lagente ¬¬



bueno bye

[shembao]

Iniciado por danistrein

¬¬ por que nunka llego a time para ayudar a resolver sus problemas

a lagente ¬¬



bueno bye

si me puedes ayudar!!!! mira abajo

[shembao]

bien todo bien .... pero como lo hago para poder separarlo por secciones ... miren la foto ..





quiero pasar para abajo las 2 tablas ... como lo hago?

[shurshok]

si me muestras el codigo html te podria ayudar, igualmente prueba poniendo un <br />

[shembao]

Iniciado por shurshok

si me muestras el codigo html te podria ayudar, igualmente prueba poniendo un <br />

ahi va....

<table width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Detallado)
</caption>
<tr >
<th width="25%" scope="col">Pais</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<? $total_pais=0;
while($row=mysql_fetch_array($query)){
if($row['pais']=='Chile')
$nacional=$row['total'] ?>
<th scope="row"><div align="left"><? echo $row['pais']; ?></div></th>
<td align="right"><? echo porcentaje($total1[0],$row['total']); ?></td>
<td align="right"><? echo $row['total']; ?></td>
</tr>
<? } ?>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total1[0], $total1[0]); ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total1[0]; ?></span></td>
</tr>
</table>

<table width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Simplificado)
</caption>
<tr >
<th width="25%" scope="col">Procedencia</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row">Nacional</th>
<td align="right"><? echo porcentaje($total1[0],$nacional); ?></td>
<td align="right"><? echo $nacional; ?></td>
</tr>
<tr >
<th scope="row">Extranjeros</th>
<td align="right"><? echo porcentaje($total1[0],$total1[0]-$nacional); ?></td>
<td align="right"><? echo $total1[0]-$nacional; ?></td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total1[0], $total1[0]); ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total1[0]; ?></span></td>
</tr>
</table>

[shembao]

Mikmoro ayuda!!!!

[masterojitos]

no entiendo bien el problema la verdad.... pero no se solucionaria haciendo una tabla mayor para todo.... osea como un MasterTable con borde cero(0)..... en la cual en cada celda vaya una tabla y ahora si manejarias donde quieres que vaya cada una......

Suerte y Que Dios te Bendiga.

[Mikmoro]

Mira, es fácil.
Si queremos afectar a todos los elementos de un tipo (como table), o a todos los que están dentro de tal contenedor, lo hacemos como hemos hecho hasta ahora, poniendo la propiedad en el selector de la etiqueta

table {...}

Pero si lo que queremos es afectar sólo a algunos de ellos, lo más fácil es asiganrles una clase y poner propiedades sólo para los de esa clase.

Tu tienes tres tablas; dos quieres que puedan ponerse al lado y la primera no. La manera es:

<table>....</table>
<table class="seccion">...</table>
<table class="seccion">...</table>

y ahora en la css:

table.seccion {float: left;...}

¿Lo ves claro?

[shembao]

Iniciado por Mikmoro

Mira, es fácil.
Si queremos afectar a todos los elementos de un tipo (como table), o a todos los que están dentro de tal contenedor, lo hacemos como hemos hecho hasta ahora, poniendo la propiedad en el selector de la etiqueta

table {...}

Pero si lo que queremos es afectar sólo a algunos de ellos, lo más fácil es asiganrles una clase y poner propiedades sólo para los de esa clase.

Tu tienes tres tablas; dos quieres que puedan ponerse al lado y la primera no. La manera es:

<table>....</table>
<table class="seccion">...</table>
<table class="seccion">...</table>

y ahora en la css:

table.seccion {float: left;...}

¿Lo ves claro?

no me sale ... no entiendo cual es el problema, tambien hay q oensar que nesecito ocupar el css ...

[Mikmoro]

Iniciado por shembao

no me sale ... no entiendo cual es el problema, tambien hay q oensar que nesecito ocupar el css ...

No entiendo esta frase.

[shembao]

Iniciado por Mikmoro

No entiendo esta frase.

bueno ... vamos a explicarnos por parte ...

en este momento se ve de la siguiente manera



el codigo es:

<div style="margin-left:20px;" >
<table class="alex" width="30%" border="1" cellspacing="1">
<caption>
Flujo General Ingreso/Salida
</caption>
<tr >
<th width="39%" scope="col">Tipo Registro</th>
<th align="center" width="20%" scope="col">%</th>
<th align="center" width="25%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingresos</div></th>
<td align="right"><? echo porcentaje($total[0],$ingresos[0]) ?></td>
<td align="right"><? echo $ingresos[0] ?></td>
</tr>
<tr>
<th scope="row"><div align="left">Salidas</div></th>
<td align="right"><? echo porcentaje($total[0],$salidas[0]) ?></td>
<td align="right"><? echo $salidas[0] ?></td>
</tr>
<tr >
<th scope="row"><div align="left" class="Estilo1">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total[0],$total[0]) ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total[0] ?></span></td>
</tr>
</table>
</div>

/*** DOS ULTIMAS TABLAS ***/

<div >
<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Detallado)
</caption>
<tr >
<th width="25%" scope="col">Pais</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<? $total_pais=0;
while($row=mysql_fetch_array($query)){
if($row['pais']=='Chile')
$nacional=$row['total'] ?>
<th scope="row"><div align="left"><? echo $row['pais']; ?></div></th>
<td align="right"><? echo porcentaje($total1[0],$row['total']); ?></td>
<td align="right"><? echo $row['total']; ?></td>
</tr>
<? } ?>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total1[0], $total1[0]); ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total1[0]; ?></span></td>
</tr>
</table>

<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Simplificado)
</caption>
<tr >
<th width="25%" scope="col">Procedencia</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row">Nacional</th>
<td align="right"><? echo porcentaje($total1[0],$nacional); ?></td>
<td align="right"><? echo $nacional; ?></td>
</tr>
<tr >
<th scope="row">Extranjeros</th>
<td align="right"><? echo porcentaje($total1[0],$total1[0]-$nacional); ?></td>
<td align="right"><? echo $total1[0]-$nacional; ?></td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total1[0], $total1[0]); ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total1[0]; ?></span></td>
</tr>
</table>
</div>

SIN embargo si en la segunda etiqueta div coloco class='alex'

se arregla y queda de la siguiente manera:




el codigo del css es:

/*
Grey Suits you Sir. Please host the images on your own server.
written by Stuart Colville http://www.muffinresearch.co.uk
*/


.alex table, .alex td
{
border : 1px solid #CCC;
border-collapse : collapse;
font : small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
font:small
}
.alex table
{
float:left;
margin-left:20px;
border :1px solid #CCC;
}
table.seccion
{
margin-left:20px;
border :1px solid #CCC;
}
.alex thead th,
.alex tbody th
{
background : #FFF url(th_bck.gif) repeat-x;
color : #666;
padding : 5px 10px;
border-left : 1px solid #CCC;
}
.alex tbody th
{
background : #fafafb;
border-top : 1px solid #CCC;
font-weight : normal;
}
.alex tbody tr td
{
padding : 5px 10px;
color : #666;
}
.alex tbody tr:hover
{
background : #FFF url(tr_bck.gif) repeat;
}

.alex tbody tr:hover td
{
color : #454545;
}
.alex tfoot td,
.alex tfoot th
{
border-left : none;
border-top : 1px solid #CCC;
padding : 4px;
background : #FFF url(foot_bck.gif) repeat;
color : #666;
}
.alex caption
{
text-align : center;
font-size : 120%;
padding : 10px 0;
color : #666;
}
.alex table a:link
{
color : #666;
}
.alex table a:visited
{
color : #666;
}
.alex table a:hover
{
color : #003366;
text-decoration : none;
}
.alex table a:active
{
color : #003366;
}

como lo hago???

ya que si no le coloco <div class='alex'> queda como el primer dibujo ... .????

help!!!

[Mikmoro]

Bueno, es que como te decía yo no lo haría así: lo que haría sería quitar la clase "alex" de la primera tabla i dejársela a las otras dos, y luego los selectores sería tipo:

table.alex {...}
table.alex td {...}

Sólo con que le quites esa clase a la primera tabla y pongas esto:

table.alex {float: left;}

ya te tiene que quedar como quieres.

Si no queda claro luego te hago un ejemplo, pero mejor que el PHP pon el código HTML generado en el navegador.

[shembao]

lo que deseo en realidad es que me quede como esta en la segunda imagen ... eso esta bien ... pero como lo hago ahora para insertar una nueva fila ???
por ejemplo quiero insertar una tabla nueva y que vaya sola en la fila ... como lo hago?

a todo esto se me olvidaba ... si le quito la clase alex a la primera tabla ... se va el estilo css ....

aca va el codigo html:

<div style="margin-left:20px;" >
<table class="alex" width="30%" border="1" cellspacing="1">
<caption>
Flujo General Ingreso/Salida
</caption>
<tr >
<th width="39%" scope="col">Tipo Registro</th>
<th align="center" width="20%" scope="col">%</th>
<th align="center" width="25%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingresos</div></th>
<td align="right">53.3</td>
<td align="right">391</td>
</tr>
<tr>
<th scope="row"><div align="left">Salidas</div></th>
<td align="right">46.7</td>
<td align="right">342</td>
</tr>
<tr >
<th scope="row"><div align="left" class="Estilo1">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">733</span></td>
</tr>
</table>
</div>

<hr />

<div class="alex" >
<h4 >Ingresos</h4>
<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Detallado)
</caption>
<tr >
<th width="25%" scope="col">Pais</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row"><div align="left">Perú</div></th>
<td align="right">2.8</td>
<td align="right">7</td>
</tr>
<th scope="row"><div align="left">Otro</div></th>
<td align="right">7.7</td>
<td align="right">19</td>
</tr>
<th scope="row"><div align="left">Chile</div></th>
<td align="right">79.4</td>
<td align="right">196</td>
</tr>
<th scope="row"><div align="left">Bolivia</div></th>
<td align="right">10.1</td>
<td align="right">25</td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">247</span></td>
</tr>
</table>

<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Simplificado)
</caption>
<tr >
<th width="25%" scope="col">Procedencia</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row">Nacional</th>
<td align="right">79.4</td>
<td align="right">196</td>
</tr>
<tr >
<th scope="row">Extranjeros</th>
<td align="right">20.6</td>
<td align="right">51</td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">247</span></td>
</tr>
</table>


</div>

[Mikmoro]

Como veo que no me entiendes esta tarde te hago un ejemplo.

[Mikmoro]

Mira, esto es lo que te quiero decir: no hace falta que el div tenga una clase especial, sino que les pongo las misma a ambos. Lo que hago es que las tablas que quiero que se pongan al lado tienen un float:left, y las que no, no:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Tablas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.bloque {margin-left:20px;}
.bloque table, .bloque td {border : 1px solid #CCC;
border-collapse : collapse;
font : small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
font:small
}
.bloque table {margin-left:20px;
border :1px solid #CCC;
}
table.seccion {margin-left:20px;
border :1px solid #CCC;
}
.bloque thead th,
.bloque tbody th {background : #FFF url(th_bck.gif) repeat-x;
color : #666;
padding : 5px 10px;
border-left : 1px solid #CCC;
}
.bloque tbody th {background : #fafafb;
border-top : 1px solid #CCC;
font-weight : normal;
}
.bloque tbody tr td {padding : 5px 10px;
color : #666;
}
.bloque tbody tr:hover {background : #FFF url(tr_bck.gif) repeat;}

.bloque tbody tr:hover td {color : #454545;}
.bloque tfoot td,
.bloque tfoot th {border-left : none;
border-top : 1px solid #CCC;
padding : 4px;
background : #FFF url(foot_bck.gif) repeat;
color : #666;
}
.bloque caption {text-align : center;
font-size : 120%;
padding : 10px 0;
color : #666;
}
.bloque table a:link {color : #666;}
.bloque table a:visited {color : #666;}
.bloque table a:hover {
color : #003366;
text-decoration : none;
}
.bloque table a:active {
color : #003366;
}
table.alex {float: left;}
</style>
</head>
<body>
<div class="bloque" >
<table width="30%" border="1" cellspacing="1">
<caption>
Flujo General Ingreso/Salida
</caption>
<tr >
<th width="39%" scope="col">Tipo Registro</th>
<th align="center" width="20%" scope="col">%</th>
<th align="center" width="25%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingresos</div></th>
<td align="right">53.3</td>
<td align="right">391</td>
</tr>
<tr>
<th scope="row"><div align="left">Salidas</div></th>
<td align="right">46.7</td>
<td align="right">342</td>
</tr>
<tr >
<th scope="row"><div align="left" class="Estilo1">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">733</span></td>
</tr>
</table>
</div>

<hr />

<div class="bloque">
<h4 >Ingresos</h4>
<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Detallado)
</caption>
<tr >
<th width="25%" scope="col">Pais</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row"><div align="left">Perú</div></th>
<td align="right">2.8</td>
<td align="right">7</td>
</tr>
<th scope="row"><div align="left">Otro</div></th>
<td align="right">7.7</td>
<td align="right">19</td>
</tr>
<th scope="row"><div align="left">Chile</div></th>
<td align="right">79.4</td>
<td align="right">196</td>
</tr>
<th scope="row"><div align="left">Bolivia</div></th>
<td align="right">10.1</td>
<td align="right">25</td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">247</span></td>
</tr>
</table>

<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Simplificado)
</caption>
<tr >
<th width="25%" scope="col">Procedencia</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row">Nacional</th>
<td align="right">79.4</td>
<td align="right">196</td>
</tr>
<tr >
<th scope="row">Extranjeros</th>
<td align="right">20.6</td>
<td align="right">51</td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">247</span></td>
</tr>
</table>
</div>
</body>
</html>

Ahora puedes poner tantos div bloque como quieras, que irán unos debajo de otros, y tantas tablas como quieras en cada uno; si una tabla tiene la clase .alex se pondrá a la derecha de otra con la misma clase, y si no la tiene, irá a la siguiente línea.