ayúdenme con ordenar unas tablas HTML

[tekun]

hey programadores,... yo tengo conocimiento de copyPaste en html... he intentado por vario rato y no me sale...
tengo esta tablita picosa



que esta acá:

http://codepen.io/alassetter/full/cyrfB/

lo que quiero es poder ponerla como esta imagen, ordenarlas con un titulo y poner 2, 3 o cuatro en forma horizontal, luego un titulo que tenga debajo otras 3 o 4 horizontales... así:

que le modifico al código para poderlo hacer?

[raiderek]

http://codepen.io/raiderek/pen/vgXoaE

[guineo_17]

Si lo que queres es solo combinar....
http://codepen.io/anon/pen/qRaeXg

[tekun]

http://codepen.io/raiderek/pen/vgXoaE

bien, sería mucho pedir que cuando sea muy pequeña la pantalla se pase una debajo de otra?...de las tres que están línea

Si lo que queres es solo combinar....
http://codepen.io/anon/pen/qRaeXg

nada que ver... no era de combinar

[raiderek]

bien, sería mucho pedir que cuando sea muy pequeña la pantalla se pase una debajo de otra?...de las tres que están línea

http://codepen.io/raiderek/pen/vgXoaE

[rdoggsv]

Cada tabla la queres siempre separada pero a la par?, o queres que se vean unidas como una sola ?

Si queres varias tablas a la par tenes que jugar con el display, o con el float. Por ejemplo puse 2 y le cambie el css a float:left y puse un h4 para el titulo que queres

http://codepen.io/rafaelsv/full/GrNKKN/

Un gran diferencia es que ya no se ven centradas. Si queres que se vean siempre centradas tendrías que agregar otro div que cubra las tablas y centrarlo. También tenes que jugar con el max-width por que si lo dejas muy grande no caben las tablas, y se activa automaticamente el responsive mode y se va la otra para abajo.

[tekun]

http://codepen.io/raiderek/pen/vgXoaE

aja, pero resulta que yo tengo grupos de tablas...
o sea  mi listado de tres tablas y luego un header asi como el la imagen que puse...

con el de rdogg el problema que tengo es que al poner otro titulo con otras dos imagenes se ponen así:




y yo quiero que las otras dos imagenes se separen por el H4

[raiderek]

aja, pero resulta que yo tengo grupos de tablas...
o sea  mi listado de tres tablas y luego un header asi como el la imagen que puse...

con el de rdogg el problema que tengo es que al poner otro titulo con otras dos imagenes se ponen así:

http://codepen.io/raiderek/pen/vgXoaE

[tekun]

excelente raiderek... así es tal como lo necesitaba... gracias !!!


lástima que ya no te puedo dar el ThankYou... pero.... tu muy bien 

[rdoggsv]

El siguiente elemento tiene que hacer un clear del float.

Aquí te dejo el ejemplo con 2 tablas abajo de 2 titulos como lo pedís  .

http://codepen.io/rafaelsv/full/GrNKKN/

[tekun]

excelente rdogg
hey gracias... porque yo solo a copyPasta en html... pero este año me van a mandar a capacitación .... gracias!

[guineo_17]

bien, sería mucho pedir que cuando sea muy pequeña la pantalla se pase una debajo de otra?...de las tres que están línea

nada que ver... no era de combinar

Disculpa pues...