Sv Community El Salvador

Soporte y Tecnología => Programación => Web => Mensaje iniciado por: tekun en enero 16, 2017, 02:26:24 pm

Título: ayúdenme con ordenar unas tablas HTML
Publicado por: tekun en enero 16, 2017, 02:26:24 pm
hey programadores,... yo tengo conocimiento de copyPaste en html... he intentado por vario rato y no me sale...
tengo esta tablita picosa

(https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/CodePen-Data-Table.png)

que esta acá:

http://codepen.io/alassetter/full/cyrfB/ (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?

(http://i.imgur.com/olOBayt.png)
Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: raiderek en enero 16, 2017, 03:05:04 pm
http://codepen.io/raiderek/pen/vgXoaE (http://codepen.io/raiderek/pen/vgXoaE)
Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: guineo_17 en enero 16, 2017, 03:10:03 pm
Si lo que queres es solo combinar....
http://codepen.io/anon/pen/qRaeXg (http://codepen.io/anon/pen/qRaeXg)
Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: tekun en enero 16, 2017, 03:17:21 pm
http://codepen.io/raiderek/pen/vgXoaE (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 (http://codepen.io/anon/pen/qRaeXg)

nada que ver... no era de combinar
Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: raiderek en enero 16, 2017, 03:26:45 pm
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 (http://codepen.io/raiderek/pen/vgXoaE)
Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: rdoggsv en enero 16, 2017, 03:28:30 pm
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/ (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.
Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: tekun en enero 16, 2017, 03:45:53 pm
http://codepen.io/raiderek/pen/vgXoaE (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í:

(http://i.imgur.com/hPhS0Cn.png)


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

(http://i.imgur.com/olOBayt.png)
Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: raiderek en enero 16, 2017, 04:02:07 pm
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 (http://codepen.io/raiderek/pen/vgXoaE)
Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: tekun en enero 16, 2017, 04:09:23 pm
excelente raiderek... así es tal como lo necesitaba... gracias !!!


lástima que ya no te puedo dar el ThankYou... pero.... tu muy bien  ohyea:
Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: rdoggsv en enero 16, 2017, 04:12:31 pm
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  :thumbsup:.

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

Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: tekun en enero 16, 2017, 04:18:27 pm
excelente rdogg
hey gracias... porque yo solo a copyPasta en html... pero este año me van a mandar a capacitación .... gracias!
Título: Re:ayúdenme con ordenar unas tablas HTML
Publicado por: guineo_17 en enero 16, 2017, 08:05:31 pm
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...