tablas en paralelo

Hola compis hace tiempo me hice el curso paso a paso y ahora mismo pues tengo que pulir y aprender muchas mas cosas, bueno voy a dejarme de rodeos y voy al grano, lo que me gustaria es saver como puedo hacer para poner las tablas en paralelo no se si me explico les pondre un pequeño ejemplo.

asi es como yo aprendi

TABLA1
TABLA2

no es lo que quiero yo.

seria tal que asi.

TABLA1 TABLA2
TABLA3 TABLA4

para que las quiero yo, ya que estamos en año de mundial de Brazil 2014 pues quiero colocar los grupos como tablas.

Buenas:

Entiendo tu pregunta, pero a mi modo de vista se puede hacer solo con una tabla. Ademas, si tienes parte del codigo creado seria bueno que lo colocases, pues talvez te podemos encontrar algun error o simplificar el codigo para que te sea mas facil realizar lo que deseas.

Para colocar dos tablas consecutivas solo tienes que colocarlas consecutivas en el html. Dependiendo del tamaño que tengan te quedaran juntas o no. Si reduces el tamaño y no logras juntarlas intenta colocar un "id" para cada tabla y desde el css con el atributo "position" colocarlas en su sitio. Si tienes dudas de como funciona el valor position te dejo un link de los valores que puede tomar: http://css.hazunaweb.com/213.php

Epero que te alla sido de ayuda.

no tengo el codigo realizado todavia, es tan solo una idea en mi cabeza y ya sabes lo que se suele decir que una idea es solo una idea jejeje pero de todos modos estaria gustoso de que me aconsejarais de como lo hariais vosotros.

le echare un vistazo al codigo. Asi de primera vista te recomiendo que uses un archivo para los estilos. Si note acuerdas como se hace esta en el tutorial de la pagina, esto te facilitara bastante tu trabajo. Ademas, te recomiendo que coloques comentarios en el html para aclararte mas sobre que estas viendo, asi cuando los demas lo veamos nos sera mas facil. En cuanto al codigo eso, le echare un vistazo y contestare lo antes posible si puedo ayudarte.

Hola alex222en y gracias por tomarte tu tiempo en revisar el codigo y responder pero una pregunta el padding: 10px 20px da el espacio entre tablas pero los valores px a que espacio corresponde si el 10px es el espacio lateral y el 20px es el espacio por encima?

Me algro que te haya sido de ayuda.

El padding funciona asi:

padding: top rigth bottom left; Esas son sus propiedades, en el caso que te coloque yo, como solo estan las dos primeras estas se repites, es decir, si solo especifico el top y rigth, estes se repiten respectivamente en botton y left. EJ: paddin: 10px 20; es lo mismo que padding: 10px 20px 10px 20px;

Si no lo comprendes avisa qeu te pongo un ejemplo.

Como ayuda a la explicación del compañero alex222en, piensa que las propiedades de padding (y todas en las que se puedan especificar las 4 propiedades, como margin) van en el orden de las agujas del reloj: arriba, derecha, abajo, izquierda.

Entonces, si escribes:

padding: 10px 20px 10px 20px;

Es como si le dices al navegador:

Deja 10 píxeles de espacio por arriba, 20 por la derecha, 10 por abajo y 20 por la izquierda

Hay otra manera más sencilla para estos casos, en los que aplicas el mismo valor por arriba y por abajo y el mismo valor por los lados. Como puedes ver aplicas 10px por arriba y por abajo, y 20px por ambos lados. Este padding se podría resumir así:

padding: 10px 20px;

Otros dos apuntes adiccionales, si quieres dejar el mismo valor por todos los lados, basta poner la cifra una sóla vez:

padding: 10px; /* Esto dejaría 10px por arriba, derecha, abajo e izquierda */

Si quieres poner el valor 0 en alguno, no hace falta escribir "px", podría decirse así:

padding: 10px 20px 0 10px;

Hola compis como no me llegaba los correos de sus respuestas no me dio tiempo y puse el primer codigo que puse y a que no adivinais jejeje

http://labuenaondaradio.com/home.html