[Avanzado] Tablas y propiedades
La manipulación de tablas dentro del foro es una buena manera de adornar algunos temas y también los hace verse más profesionales.
En el presente tutorial utilizaremos únicamente BBC, y explicaré desde como hacer tablas simples, hasta como agregar las propiedades, además de ejemplos prácticos. Después intentaré hacer unas "plantillas" para que puedan usar y editar en sus propios temas.
Es un tutorial Avanzado porque manejaremos solo códigos, pero no necesitan muchos conocimientos previos, así que cualquiera puede hacerlo.
Las tablas son, a mi parecer, la mejor manera de organizar los datos dentro de un tema (HAHAHA irónico), siendo más especifico, crear listas; Un ejemplo podría ser un Pase de lista, o una lista de items para algún juego de rol.
El código general para una tabla es
En donde la etiqueta [ TABLE ] índica a partir de ahí abriremos una tabla y la etiqueta [/ TABLE ] la cierra. Las etiquetas que vemos dentro de TABLE son TR y TD tambien cerradas con un /
TR será la cantidad de filas y TD la cantidad de columnas, y dentro de las etiquetas TD, irá el texto, imágenes, o cualquier cosa que se desee colocar, se pueden colocar incluso más tablas o cualquier otro BBCODE.
Así, si queremos hacer una lista de compras agregándole 5 cosas, tendrán que ser 5 TR, con 1 TD cada uno.
Ahora vamos a agregarle otro TD, es decir tendremos 5 TR con 2 TD cada uno, dentro del segundo escribiremos "SI" para decir que ya compramos, y "NO" para referirnos a lo que nos falta por comprar.
El código para esa tabla es el siguiente:
La siguiente imagen muestra el funcionamiento de TR y TD dentro de la lista.
Acá dejo un ejercicio por si quieren probar algo, si se animan posteen su solución aquí debajo. CON CÓDIGO.
Si lograste hacer el ejercicio de prueba, podemos comenzar a indagar un poco en las propiedades. Las propiedades básicamente son las opciones que tengamos disponibles para modificar estéticamente la tabla a nuestro antojo. Veamos algunas propiedades y como se utilizan
Propiedades para bordes
class: outer_border Funciona para añadirle un borde exterior negro a nuestra tabla, es decir, solo a las 4 "paredes" de la tabla, por ejemplo.
Observamos que se encuentra entre comillas " ", así va la sintaxis, toda propiedad que pensamos colocar se encontrará entre comillas, de lo contrario la propiedad no se aplicará y automáticamente pasará a estar en
La palabra reservada class: funciona para llamar a las propiedades ya definidas por un programador (programador de VBulletin en este caso).
Veamos otra propiedad
class: grid Esta lo que hace es darle un borde negro a todas las celdas de nuestra tabla (columnas en filas), también conocido como Cuadrícula Completa por obvias razones. Veamos un ejemplo.
¡Ahora vamos a ver como añadir y mezclar propiedades!
Propiedades de alineamiento
Verán, muchas veces utilizar las etiquetas CENTER, LEFT, RIGHT (etiquetas que ya todos conocemos), no funcionan con las tablas, para esto existen propiedades/clases (class) especiales para alineamientos, estas propiedades deben ir la palabra clave align al igual que usabamos class, es decir, no utilizaremos class sino en su lugar align. Las propiedades de alineamiento son simples:
align: left para izquierda
align: center para centrado
align: right para derecha
Para utilizar 2 propiedades de tabla al mismo tiempo, separamos cada una de las propiedades por una coma "," de esta manera: TABLE= "class: grid, align: center"
Utilizaremos la anterior tabla de 2x3 y vamos a alinearla al centro.
El código hasta ahora es
La propiedad de Anchura
Sin la propiedad Anchura, el ancho de nuestra tabla se modifica automáticamente según lo que coloquemos en nuestra celda (texto, imágenes, vídeos etc.), pero existe una manera de definir una anchura propia para que el tamaño no se modifique, y esta se mide en píxeles/porcentaje aunque es recomendable usar píxeles y eso es lo que usaremos aquí.
Primero, la propiedad anchura no ocupa ni class, ni align, esta ocupa width y la definimos de la misma manera que sus otras 2 compañeras xD, también la añadimos en la etiqueta TABLE con una coma, de esta manera sería para una tabla de 150 de anchura:
TABLE= "class: grid, width: 150"
Aquí el ejercicio de la segunda parte
Hasta aquí todo bien, nada que no se pueda hacer con el editor de tablas WYSIWYG, pero era importante explicarlo para aprender como se añaden las propiedades para la que veremos más adelante, decir también que las tablas se añaden de manera similar cambiando solo un poco la sintaxis, en lenguajes como HTML, así que si quieren aprender un poco pueden guiarse aquí.
En el presente tutorial utilizaremos únicamente BBC, y explicaré desde como hacer tablas simples, hasta como agregar las propiedades, además de ejemplos prácticos. Después intentaré hacer unas "plantillas" para que puedan usar y editar en sus propios temas.
Es un tutorial Avanzado porque manejaremos solo códigos, pero no necesitan muchos conocimientos previos, así que cualquiera puede hacerlo.
Parte I: Tablas simples
Las tablas son, a mi parecer, la mejor manera de organizar los datos dentro de un tema (HAHAHA irónico), siendo más especifico, crear listas; Un ejemplo podría ser un Pase de lista, o una lista de items para algún juego de rol.
El código general para una tabla es
Código:
[TABLE ] [TR ] [TD ][/TD ] [/TR ] [/TABLE ] [B]sin espacios[/B]
En donde la etiqueta [ TABLE ] índica a partir de ahí abriremos una tabla y la etiqueta [/ TABLE ] la cierra. Las etiquetas que vemos dentro de TABLE son TR y TD tambien cerradas con un /
TR será la cantidad de filas y TD la cantidad de columnas, y dentro de las etiquetas TD, irá el texto, imágenes, o cualquier cosa que se desee colocar, se pueden colocar incluso más tablas o cualquier otro BBCODE.
Así, si queremos hacer una lista de compras agregándole 5 cosas, tendrán que ser 5 TR, con 1 TD cada uno.
| Leche |
| Huevos |
| Cereal |
| Queso |
| Pan |
Ahora vamos a agregarle otro TD, es decir tendremos 5 TR con 2 TD cada uno, dentro del segundo escribiremos "SI" para decir que ya compramos, y "NO" para referirnos a lo que nos falta por comprar.
| Leche | SI |
| Huevos | SI |
| Cereal | SI |
| Queso | NO |
| Pan | NO |
El código para esa tabla es el siguiente:
Código:
[TABLE ] [TR ] [TD ]Leche[/TD ] [TD ]SI[/TD ] [/TR ] [TR ] [TD ]Huevos[/TD ] [TD ]SI[/TD ] [/TR ] [TR ] [TD ]Cereal[/TD ] [TD ]SI[/TD ] [/TR ] [TR ] [TD ]Queso[/TD ] [TD ]NO[/TD ] [/TR ] [TR ] [TD ]Pan[/TD ] [TD ]NO[/TD ] [/TR ] [/TABLE ]
La siguiente imagen muestra el funcionamiento de TR y TD dentro de la lista.
Acá dejo un ejercicio por si quieren probar algo, si se animan posteen su solución aquí debajo. CON CÓDIGO.
Ejercicio de pruebaCrea una tabla con 11 filas y 3 columnas para hacer una lista de 10 pokémon de cualquier tipo, las columnas de la primera fila deberán llevar títulos "Numero #DEX, Pokémon, Tipo" en negrita, el resto de las columnas llenarlas con los datos que sea.
Parte II: Propiedades a la etiqueta TABLE
Si lograste hacer el ejercicio de prueba, podemos comenzar a indagar un poco en las propiedades. Las propiedades básicamente son las opciones que tengamos disponibles para modificar estéticamente la tabla a nuestro antojo. Veamos algunas propiedades y como se utilizan
Propiedades para bordes
class: outer_border Funciona para añadirle un borde exterior negro a nuestra tabla, es decir, solo a las 4 "paredes" de la tabla, por ejemplo.
| Tabla de una fila una columna (1x1) utilizando la propiedad outer_border |
pregunta rápida
¿Cuantos se TR Y TD utilizamos para una tabla de 3x2?
¿Cómo se utiliza?, debemos colocar esa palabra clave class: outer_border en nuestra etiqueta TABLE de esta manera y se cierra de manera normal
Observamos que se encuentra entre comillas " ", así va la sintaxis, toda propiedad que pensamos colocar se encontrará entre comillas, de lo contrario la propiedad no se aplicará y automáticamente pasará a estar en
La palabra reservada class: funciona para llamar a las propiedades ya definidas por un programador (programador de VBulletin en este caso).
Veamos otra propiedad
class: grid Esta lo que hace es darle un borde negro a todas las celdas de nuestra tabla (columnas en filas), también conocido como Cuadrícula Completa por obvias razones. Veamos un ejemplo.
| Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid |
| Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid |
¿Cómo se usa? debemos colocar la palabra clave class: grid dentro de la etiqueta TABLE, como hicimos anteriormente, entonces quedaría así
¡Ahora vamos a ver como añadir y mezclar propiedades!
Propiedades de alineamiento
Verán, muchas veces utilizar las etiquetas CENTER, LEFT, RIGHT (etiquetas que ya todos conocemos), no funcionan con las tablas, para esto existen propiedades/clases (class) especiales para alineamientos, estas propiedades deben ir la palabra clave align al igual que usabamos class, es decir, no utilizaremos class sino en su lugar align. Las propiedades de alineamiento son simples:
align: left para izquierda
align: center para centrado
align: right para derecha
Para utilizar 2 propiedades de tabla al mismo tiempo, separamos cada una de las propiedades por una coma "," de esta manera: TABLE= "class: grid, align: center"
Utilizaremos la anterior tabla de 2x3 y vamos a alinearla al centro.
| Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid |
| Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid |
El código hasta ahora es
Código:
[TABLE="class: grid, align: center" ] [TR ] [TD ]Tabla de 2x3 utilizando grid[/TD ] [TD ]Tabla de 2x3 utilizando grid[/TD ] [TD ]Tabla de 2x3 utilizando grid[/TD ] [/TR ] [TR ] [TD ]Tabla de 2x3 utilizando grid[/TD ] [TD ]Tabla de 2x3 utilizando grid[/TD ] [TD ]Tabla de 2x3 utilizando grid[/TD ] [/TR ] [/TABLE ] [B]Sin espacios[/B]
La propiedad de Anchura
Sin la propiedad Anchura, el ancho de nuestra tabla se modifica automáticamente según lo que coloquemos en nuestra celda (texto, imágenes, vídeos etc.), pero existe una manera de definir una anchura propia para que el tamaño no se modifique, y esta se mide en píxeles/porcentaje aunque es recomendable usar píxeles y eso es lo que usaremos aquí.
Primero, la propiedad anchura no ocupa ni class, ni align, esta ocupa width y la definimos de la misma manera que sus otras 2 compañeras xD, también la añadimos en la etiqueta TABLE con una coma, de esta manera sería para una tabla de 150 de anchura:
TABLE= "class: grid, width: 150"
| Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid |
| Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid | Tabla de 2x3 utilizando grid |
Aquí el ejercicio de la segunda parte
Añadirle las 3 propiedades a la tabla de la sección anterior, recuerden que fue de 11x3, colocar en grid, a la derecha, con una anchura de 1000
Hasta aquí todo bien, nada que no se pueda hacer con el editor de tablas WYSIWYG, pero era importante explicarlo para aprender como se añaden las propiedades para la que veremos más adelante, decir también que las tablas se añaden de manera similar cambiando solo un poco la sintaxis, en lenguajes como HTML, así que si quieren aprender un poco pueden guiarse aquí.
Spoiler
skov <33
