Foros de Centro Pokémon
Archivo histórico
Estás viendo el archivo de los foros de Centro Pokémon. Ya no se pueden crear temas, responder ni iniciar sesión.
Foros›Xtra›El Limbo›

Clase especial: Tablas 101

#1

Clase especial: Tablas 101












C L A S E...E S P E C I A L : T A B L A S 1 0 1
CÓMO CREAR TABLAS DE TODOS LOS TIPOS Y COLORES































INTRODUCCIÓN
Hace un rato estaba intentando hacer mi ficha de inscripción para Odisea, y se me ocurrió que, no habiendo shout y estando todos aburridos, tal vez podía ocupar ese tiempo con algunas clases para hacer tablas. No hablo de las típicas tablas con un color de fondo solamente, sino de aquellas con todo un diseño armado.

No es complicado, ¡y cualquiera puede hacerlo! Tal vez con estos tips se animen a utilizarlas en posts de Academia, Odisea, o incluso en cualquier otra parte del foro.
REQUISITOS
Técnicamente, la clase no pide ningún requisito previo. Cualquier usuario que este interesado en aprender o intentar hacer tablas llamativas puede intentarlo. Sin embargo, piensen que se usa muchísimo código BB, y cuando digo mucho es MUCHO.

Los dos requisitos necesarios para intentarlo son la paciencia y prolijidad.

Por prolijidad no hablo de lo estético, o como ven la tabla en Vista Previa, sino el uso de los códigos en el editor normal. Se usa muchísimos códigos, y si no se mantiene cierto orden, encontrar un error entre todos ellos se hace complicado. Tampoco significa que todo código debe estar perfectamente puesto; esta tabla que estoy usando tiene su quilombo en el editor normal, pero eso no significa que con un poco de paciencia se puede encontrar fácil los errores o lo necesario a editar.

Y esto nos lleva al segundo requisito, que es paciencia. Las tablas tranquilamente se pueden hacer en el editor avanzado (aquel que te permite ver directamente en el cuerpo para texto los códigos implementados, sin necesidad de ir a Vista Previa), pero hay veces que es necesario acceder al editor normal para agregar un color a la tabla o un código que no esta entre las opciones. Al haber tanta cantidad de texto, líneas, números y demás, la paciencia será algo necesario para poder encontrar lo que se debe editar o el error a acomodar.
INSCRIPCIONES
Con todo ya dicho, ¡cualquier usuario que este interesado en aprender puede dejar su inscripción en este mismo tema! Solo se debe completar lo siguiente

Conocimiento de Códigos BB (BB Code): [Bajo - Medio - Alto]
Conocimiento en Tablas: [Bajo - Medio - Alto]

Si bien ambas cosas son lo mismo, ya que las tablas es un código BB, hay muchas opciones que no aparecen entre las herramientas y que serán usadas en las clases.






#2
Al fin alguien que explique bien las tablas y sus códigos, hace poco logré al fin ponerle color a las tablas, suena interesante adentrarse en el tema.
Conocimiento de Códigos BB (BB Code): Medio
Conocimiento en Tablas: Bajo
#3
Conocimiento de Códigos BB (BB Code): [Medio] (se algo pero no mucho)
Conocimiento en Tablas: [Bajo](se hacer tablas normales con el editor avanzado de hay nada mas)

Team::658: lv 36:059: lv 30 :547: lv 26:397: lv 19:277:lv22
Promedio:lv:27
Inventario
Cronología
#4
Pero que interesante, hace tiempo andaba buscando como hacer tablas por internet, pero me lié buscando, esto me gustara mucho XD

Conocimiento de Códigos BB (BB Code): Medio
Conocimiento en Tablas: Bajo





Spoiler
#5
Supongo que núnca habrán suficientes tutoriales de tablas en el foro. A mi aún me complica un poco el "buen gusto" para usar estas cosas. Si vamos a trabajar algo de estilo y presentación creo que valdrá la pena ^_^ (siempre se puede mejorar en eso ¿?)

Conocimiento de Códigos BB (BB Code): Alto
Conocimiento en Tablas: Alto
Nivel de Identación: Nativo/Automágico ^_^
Guardería ya en 7ª gen. -> Pasa a revisar

gracias a Onix Tymime por la firma.
otras firmas



gracias a AnnieSvdh por la firma

#6
Suena interesante para la cronología y el inventario en Academia, así como para el Índice y Datos en Odisea, así que me apunto.
Conocimiento de Códigos BB (BB Code): Bajo
Conocimiento en Tablas: Bajo
Academia Pokémon: Cronología / Inventario

Odisea Pokémon: Índice & Datos

#7
Aprender mas nunca hace daño (?)

Conocimiento de Códigos BB (BB Code): Alto (aunque no sabia el asunto de justificar[?])
Conocimiento en Tablas: Alto (los posts del Rally de captura son la prueba [?])
Terminal Global
Guarderias | Intercambios | Eventos


ACADEMIA
#9
¡Lamento la tardanza! Estuve un buen rato pensando como arrancar con esto. Imagino que ya la mayoría conoce el cómo hacer tablas básicas. Para los que no, hay dos buenos tutoriales que Pipeboy paso en su post, aquí y aquí. Al menos lo más básico de armarlas podrán sacar de ellos.

La idea de esa "clase especial" no es enseñar a hacer tablas, sino a decorarlas, por decirlo de una manera. Mi obsesión por estas radica más que nada en utilizarlas como un reemplazo a lo que sería el CSS, que aquí no lo tenemos activado, en lugar de usarlas en si como tablas. Por eso recomendaba tener mucha paciencia; aquí es cuestión de ver cómo armarlas, lo cual puede llevar a tener dos tablas dentro de otra, que a su ves esta dentro de otra y así, siendo, sinceramente, un lío que toma tiempo hacer.


Lo primero que hay que tener en cuenta es la estructura de una tabla. Calculo que esto ya la mayoría lo conoce; la tabla posee celdas, divididas en columnas verticales y filas horizontales.



Dichas celdas pueden tener un color de fondo, a través del código “bgcolor”, agregado dentro de la etiqueta TD, de la siguiente manera: TD=”bgcolor: #hex”. Dentro de “hex”, cada uno agrega el código hexadecimal del color que más le guste.

De las siguientes páginas pueden sacar los códigos de color.

  1. http://html-color-codes.info/codigos-de-colores-hexadecimales/
  2. http://www.color-hex.com/


Con algo de color, la tabla quedaría de esta manera:
Código:
[TABLE="width: 400, align: center"*]
[TR]
[TD="bgcolor: #d43434"][COLOR=#ffffff*]Título 1[/COLOR][/TD]
[TD="bgcolor: #d43434"][COLOR=#fffff*]Título 2[/COLOR][/TD]
[/TR]
[TR]
[TD="bgcolor: #e9eff1"]Texto[/TD]
[TD="bgcolor: #e9eff1"]Texto[/TD]
[/TR]
[TR]
[TD="bgcolor: #fff"]Texto[/TD]
[TD="bgcolor: #fff"]Texto[/TD]
[/TR]
[TR]
[TD="bgcolor: #e9eff1"]Texto[/TD]
[TD="bgcolor: #e9eff1"]Texto[/TD]
[/TR]
[/TABLE*]

(recuerden que los asteriscos no van; se colocan para que el código no se muestre.)

Resultando en esto:

















Título 1 Título 2
Texto Texto
Texto Texto
Texto Texto


Además, es posible unir dos o más celdas en una sola, dentro de una tabla, de la siguiente manera:

















Título 1
Texto Texto
Texto Texto
Texto Texto


Colspan: permite unir dos columnas horizontales.
Rowspan: permite unir dos filas verticales. Sin embargo, este código no está incluido.

El Colspan puede ser usado modificando el TD de la siguiente manera: .
En la X cada uno deberá colocar la cantidad de columnas que unirán. Por ejemplo; tengo una tabla de tres columnas y cinco filas, y quiero que la primera fila sea para colocar los títulos:



























Título Título Título
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto


Pero como la columna 1 y la columna 2 contienen los mismos datos, la fila 1 y 2 de los títulos deben ser una sola, quedando en dos filas para títulos y tres para datos. Debido a esto, el número que se insertará en el Colspan será “2”. Si quiero que en lugar de tener dos o tres títulos separados tenga solo uno, coloco en el Colspan el número 3 para unir las tres filas.

Código:
[TABLE="class: grid, width: 350, align: center"*]
[TR]
[TD="colspan: 2"]Título[/TD]
[TD]Título[/TD]
[/TR]
[TR]
[TD]Texto[/TD]
[TD]Texto[/TD]
[TD]Texto[/TD]
[/TR]
[TR]
[TD]Texto[/TD]
[TD]Texto[/TD]
[TD]Texto[/TD]
[/TR]
[TR]
[TD]Texto[/TD]
[TD]Texto[/TD]
[TD]Texto[/TD]
[/TR]
[TR]
[TD]Texto[/TD]
[TD]Texto[/TD]
[TD]Texto[/TD]
[/TR]
[/TABLE*]



























Título Título
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto


Un punto importante a tener en cuenta: el código de las filas es de la siguiente manera:




Si yo uno dos filas, uno de los TD debe ser eliminado, quedando como resultado:



Si uno tres, se eliminan los dos TD restantes, quedando solo uno.


Si esto no se hace, quedará una celda fuera de la tabla.



























Título Título Título
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto



Lamentablemente, Rowspan no se encuentra entre los códigos disponibles para tablas. Sin embargo, hay una manera de hacerlo un poco más rebuscada. Para empezar, lo primero a hacer es crear una tabla de dos columnas y una sola fila.








Una vez hecha, dentro de una de las columnas se agrega una nueva tabla con la cantidad de columnas y celdas necesarias.
























Si la primera tabla de dos columnas mide 600px, las tablas en su interior deben medir la mitad (300px) o menos.

Para empezar, reconoceremos estas dos tablas como Primaria (la base) y Secundaria (la que contiene los datos). Una de las dos columnas Primarias contará con la tabla Secundaria que se divide en varias filas y columnas, aquella que posee todos los datos. Mientras tanto, la otra columna de la tabla Primaria cumplirá la función de rowpan, la única celda en la totalidad de la tabla. El resultado sería algo así:









Pikachu













Número 025
Tipo Eléctrico
Especie Ratón











Pikachu














Número 025
Tipo Eléctrico
Especie Ratón




Ahora, digamos que queremos mejorar esa tabla con la descripción de Pikachu y agregar unos datos más, como su entrada en la Pokédex.


























Pikachu
.





















Número 025
Tipo Eléctrico
Especie Ratón
Peso 6,0 Kg
Altura 0,4 m

Pokédex
Este Pokémon tiene unas bolsas en las mejillas donde almacena electricidad. Parece ser que se recargan por la noche, mientras Pikachu duerme. A veces, cuando se acaba de despertar y está aún medio dormido, descarga un poco.

Cada vez que Pikachu se encuentra con algo nuevo, le lanza una sacudida eléctrica. Si ves alguna baya chamuscada, seguro que ha sido Pikachu; a veces no controla la intensidad de la descarga.
Colores



En este caso se utilizan un total de tres tablas.
La Primaria es la base de las demás, que a su vez cumple la función de fondo. Si notan, dicha tabla mide más o menos lo mismo que el ancho del post (710px máximo) y posee un color gris de fondo.
Dentro de esta se encuentra la tabla Secundaria, la que posee todos los textos y títulos. En este caso, la tabla es de dos columnas para simular el rowspan en los datos de Pikachu, sin embargo, todas las demás filas se encuentran utilizando el código colspan, para parecer una sola columna (a excepción de la fila de los sprites, la cual no lo lleva).


Dentro de la primera fila dividida en dos irá el sprite de Pikachu y una tabla más, que contendrá los datos del mismo.




















































A simple vista la estructura parece desorganizada, pero verán que a medida que colocan datos se irá acomodando. De todas maneras hay algunos trucos para hacerlo, que explicaré más adelante.


¡Los invito a intentarlo! Prueben hacer aquí una tabla similar con los datos de cualquier otro Pokémon.

Recuerden que el tema también esta disponible para dudas; soy un poco desastrosa para explicar las cosas, así que no tengo problema en responder cualquier problema que les surja.
#10


























Mamoswine
Mamoswine





















numero: 473
Tipo: Tierra/Hielo
Especie: 2 Colmillos
Peso: 291,0KG
Altura: 2,5M

Datos de la pokedex:
Mamoswine, el Pokémon dos colmillos y forma evolucionada de Piloswine. Sus características son largos colmillos y peso 5 veces el del Piloswine. Es díficil encontrarlo desde el final de la Era Glaciar.
Colores:
Diferencia de genero: La hembras tienen los colmillos mas pequeños


1 horita bien rica haciéndola pero me gusta el resultado esto de las tablas es entretenido

Team::658: lv 36:059: lv 30 :547: lv 26:397: lv 19:277:lv22
Promedio:lv:27
Inventario
Cronología
#11
Bueno, no fue al primer intento, pero creo que quedo bastante bien


























Treecko


























Número 252
Tipo Planta
Especie Geco Bosque
Peso 5,0 Kg
Altura 0,5 m

Pokédex
Treecko tiene unos ganchos pequeños en las plantas de los pies con los que puede escalar superficies verticales. Este Pokémon ataca dando un golpetazo con la cola.

Treecko es tranquilo y tiene gran capacidad de autocontrol;no pierde la calma en ninguna situación.Si algún rival se le queda mirando fijamente,le devolverá la mirada sin ceder ni lo más mínimo de su territorio.
Colores

Academia Pokémon: Cronología / Inventario

Odisea Pokémon: Índice & Datos

#12

























Dusknoir





















Número 477
Tipo Fantasma
Especie Grilletes
Peso 106,6 Kg
Altura 2,2 m


Pokédex
Dusknoir usa sus manos para hipnotizar a sus víctimas y su antena para secuestrarlas. Su boca es un agujero negro. Es un Pokémon muy lento. Se dice que sus víctimas jamás regresan. Dusknoir es de color negro y habita en cuevas o en lugares con poca iluminación.

La boca de su estómago se abre incluso cuando se ha debilitado ante un Pokémon, como si fuera una indirecta de superioridad de él e inferioridad al otro Pokémon. Es el guardián del mundo de los muertos y protege el portal hacia esa dimensión.
Colores



A mi parecer quedó bastante bien para ser la primera vez que hago una tabla "así", me agrada bastante el resultado y al principio pareció difícil hasta que se cayó el foro por segunda vez mientras hacía la tabla y perdí el 50% de lo que hice pero lo volví a hacer rápido.

PD: Lo único que no pude hacer fue poner el color de gris en el fondo de la tabla primaria o base, no sé por qué no me tomaba el color gris.
#13

Tarea 1: pipeboy

Tarea 1: pipeboy

Ejercicio


































Golurk






Número: 623
Tipos: Tierra / Fantasma
Especie: Autómata
Altura: 2.8 m
Peso: 330 kg
Estadísticas




PS Ata Def A.E. D.E. Vel
89 124 80 55 80 55

Pokedex
Al parecer, aquel que antaño lo creó le ordenó proteger a los Pokémon y a los humanos.
Vuela a velocidad mach. Pierde el control de su energía si se le retira el sello del pecho.
Colores




Código

Código:
[noparse][table="width: 100%, align: center"]
[tr="bgcolor: #E0F8E0"]
   [td][/td]
[/tr]
[tr="bgcolor: #E0F8E0"]
   [td]
      [table="align: center, width: 450"]
      [tr="bgcolor: #8A084B"]
         [th="colspan: 2"][SIZE=4][COLOR="#FFFFFF"]Golurk[/COLOR][/SIZE][/th]
      [/tr]
      [tr="bgcolor: #F6CEE3"]
         [td="width: 200"][RIGHT][IMG]https://www.pixenli.com/images/1384/1384388678012405400.png[/IMG][/RIGHT][/td]
         [td][table="align: center"]
            [tr]  [td][B]Número:[/B][/td]  [td]623[/td]  [/tr]
            [tr]  [td][B]Tipos:[/B][/td]   [td]Tierra / Fantasma[/td]  [/tr]
            [tr]  [td][B]Especie:[/B][/td] [td]Autómata[/td]  [/tr]
            [tr]  [td][B]Altura:[/B][/td]  [td]2.8 m[/td]  [/tr]
            [tr]  [td][B]Peso:[/B][/td]    [td]330 kg[/td]  [/tr]
         [/table][/td]
      [/tr]
      [tr="bgcolor: #8A084B"]
         [th="colspan: 2"][COLOR="#FFFFFF"]Estadísticas[/COLOR][/th]
      [/tr]
      [tr="bgcolor: #F6CEE3"]
         [td="colspan: 2"][CENTER]
            [table="align: center"]
            [tr]  [th]PS[/th] [th]Ata[/th] [th]Def[/th] [th]A.E.[/th] [th]D.E.[/th] [th]Vel[/th] [/tr]
            [tr]  [td]89[/td] [td]124[/td] [td]80[/td]  [td]55[/td]   [td]80[/td]   [td]55[/td]  [/tr]
            [/table][/CENTER]
         [/td]
      [/tr]
      [tr="bgcolor: #8A084B"]
         [th="colspan: 2"][COLOR="#FFFFFF"]Pokedex[/COLOR][/th]
      [/tr]
      [tr="bgcolor: #F6CEE3"]
         [td="colspan: 2"][justify]Al parecer, aquel que antaño lo creó le ordenó proteger a los Pokémon y a los humanos.
Vuela a velocidad mach. Pierde el control de su energía si se le retira el sello del pecho.[/justify][/td]
      [/tr]
      [tr="bgcolor: #8A084B"]
         [th="colspan: 2"][COLOR="#FFFFFF"]Colores[/COLOR][/th]
      [/tr]
      [tr="bgcolor: #F6CEE3"]
         [td="colspan: 2"][table="align: center, width: 100%"][tr]
            [td][CENTER][xysprite]623[/xysprite][/CENTER][/td]
            [td][CENTER][xyshiny]623[/xyshiny][/CENTER][/td]
         [/tr][/table][/td]
      [/tr]
      [/table]
   [/td]
[/tr]
[/table][/noparse]
Tips

Hay varios códigos especiales que ocupé para esto:


  • [noparse][/noparse]: Nos permite mostrar el cógidoBB sin compilar/procesar, ni necesidad de poner caracteres que distraigan a nuestros lectores. Supongo será útil a nuestra profesora.

  • [th][/th]: Es el campo especial de Cabecera para tablas. Cómo pueden ver lo más notorio es que agrega una línea delgada al borde de la casilla. También agrega por defecto al texto de la casilla las propiedades de Centrarlo y Ennegreserlo ([CENTER][B][/B][/CENTER])

  • [tr="bgcolor: #FEDCBA"][/tr]: La propiedad de color de fondo también puede ser aplicada a TODA la fila si se agrega cómo parámetro del tag [tr][/tr] (muy útil para llevar orden y modificar rápido). Si luego agregamos la misma propiedad a una casilla [td][/td], la casilla tiene prioridad. Esta propiedad lamentablemente no funciona en el tag [table][/table].

  • Sprites: Si quieren ocupar los Sprites del foro, pueden referirse a esta guía (Ojo: algunas de esos tags no están configurados para usarlos dentro de tablas).

Guardería ya en 7ª gen. -> Pasa a revisar

gracias a Onix Tymime por la firma.
otras firmas



gracias a AnnieSvdh por la firma

#14
gracias a tu @Smile he aprendido de todo en este foro :'v

Conocimiendo en tablas: bajo
conocimiento en codigos bb: bajo :'v
#15
Conocimiento de Códigos BB (BB Code): [Bajo]
Conocimiento en Tablas: [Bajo]

Aún me puedo inscribir? u.u