Anuncio

Collapse
No announcement yet.

[Avanzado] Tablas y propiedades

Collapse
X
  • Filter
  • Hora
  • Show
Clear All
new posts

  • [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.

    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 ]
    sin espacios
    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 [TABLE= "class: outer_border" ] y se cierra de manera normal [/TABLE ]


    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 [TABLE ][/TABLE ]

    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í [TABLE= "class: grid" ][/TABLE ]


    ¡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

    [CODE]
    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



  • #2
    Parte III: COLOR - Dentro de las celdas




    Dos pájaros de un tiro.


    Las celdas son lo más importante dentro de una tabla, es decir, sin celdas no hay tabla, así de fácil, y ahora es el turno de aplicar la propiedad más llamativa a la celda, el COLOR


    Se habrán dado cuenta con los temas anteriores, una celda es representada por las etiquetas [TD ][/TD ] ya que dentro de estas, se escribe lo que se necesite aparezca en al tabla... pues bien, la etiqueta color de fondo se coloca dentro de las celdas y no en la etiqueta TABLE como veníamos trabajándolo.


    La etiqueta conocida como bgcolor actúa como color de fondo, se utiliza de esta manera:
    [TD="bgcolor: Red" ] Celda roja [/TD ]


    Ejemplo:


    Tabla de 2x3 esta celda es roja Tabla de 2x3 esta celda es azul Tabla de 2x3 esta celda no tiene color
    Tabla de 2x3 esta celda no tiene color Tabla de 2x3 esta celda no tiene color Tabla de 2x3 esta celda tambien es azul




    Código:
    [TABLE ]
    [TR ]
    [TD="bgcolor: Red" ]Tabla de 2x3 esta celda es roja[/TD ]
    [TD="bgcolor: Blue" ]Tabla de 2x3 esta celda es azul [/TD ]
    [TD ]Tabla de 2x3 esta celda no tiene color[/TD ]
    [/TR ]
    [TR ]
    [TD ]Tabla de 2x3 esta celda no tiene color[/TD ]
    [TD ]Tabla de 2x3 esta celda no tiene color[/TD ]
    [TD="bgcolor: Blue" ]Tabla de 2x3 esta celda tambien es azul [/TD ]
    [/TR ]
    [/TABLE ]
    Sin espacios!!!

    No es muy diferente a como utilizamos las propiedades anteriormente ¿no? aquí solo hay que observar que el color fue escrito en inglés, solo así funciona. Aquí una lista de los colores disponibles en inglés:


    [/Gray
    DimGray
    LightSteelBlue
    NavyBlue
    LightSlateGray
    SlateGray
    SteelBlue
    RoyalBlue
    CornFlowerBlue
    MediumSlateBlue
    LightSlateBlue
    SlateBlue
    DarkSlateBlue
    Navy
    DarkBlue
    MediumBlue
    DodgerBlue
    DeepSkyBlue
    SkyBlue
    LightSkyBlue
    LightBlue
    PowderBlue
    Azure
    LightCyan
    PaleTurquoise
    MediumTurquoise
    LightSeaGreen
    DarkCyan
    Teal
    CadetBlue
    Aqua
    Cyan
    DarkTurquoise
    Turquoise
    Aquamarine
    MediumAquamarine
    DarkSeaGreen
    MediumSeaGreen
    SeaGreen
    DarkGreen
    DarkSlateGray
    DarkOliveGreen
    Olive
    Green
    ForestGreen
    OliveDrab
    LimeGreen
    YellowGreen
    Lime
    Chartreuse
    LawnGreen
    GreenYellow
    PaleGreen
    LightGreen
    SpringGreen
    MediumSpringGreen
    DarkKhaki
    Gold
    Khaki
    PaleGoldenRod
    BlanchedAlmond
    Moccasin
    Wheat
    NavajoWhite
    SandyBrown
    Tan
    BurlyWood
    GoldenRod
    Yellow
    RosyBrown
    DarkGoldenRod
    Sienna
    SaddleBrown
    Chocolate
    Peru
    DarkRed
    Maroon
    Brown
    FireBrick
    Orange
    IndianRed
    LightCoral
    Salmon
    DarkSalmon
    LightSalmon
    Coral
    Tomato
    DarkOrange
    OrangeRed
    Crimson
    Red
    DeepPink
    Magenta
    Fuchsia
    HotPink
    Pink
    LightPink
    MediumOrchid
    PaleVioletRed
    Purple
    MediumVioletRed
    DarkMagenta
    MediumPurple
    BlueViolet
    Indigo
    DarkViolet
    DarkOrdhic
    Orchid
    Violet
    Plum






    Tambien quiero que sepan que no son los únicos colores que se pueden utilizar, pues están los colores con su código Hexadecimal que seguramente muchos ya conocen, aquí les dejo una buena página donde pueden sacar armar su propio color y les saldrá el código en Hexadecimal: http://www.w3schools.com/tags/ref_colorpicker.asp


    El código de colores se compone de #codigo, así que para utilizarlo en nuestra celda sería [TD="bgcolor: #00000" ] Celda Negra [/TD ]


    Aquí el ejercicio del capítulo 3
    Crear una tabla de 4x2 con alineación central, sin anchura definida, en las columnas de la primera fila escribir los títulos con letra blanca ALIMENTACIÓN y HORARIO deberán tener un color de fondo negro, las siguientes celdas con un color de fondo que se prefiera, y las primeras columnas de la fila 1, DESAYUNO COMIDA CENA, en las celdas de frente, escribir horarios de sus comidas xD 10:00 - 14:00 - 20:00





    Aquí un ejemplo de Tablas con colores de fondo, con lo visto hasta ahora podremos hacer algo parecido y mucho más! http://www.cpokemon.com/foro/threads...es-de-Usuarios.

    Last edited by Goresito; 16/10/2014, 17:58.



    Spoiler: 
    skov <33


    Comment


    • #3
      Parte IV: Titulos



      Capítulo extra...


      Así es, podemos hacer bonitos encabezados para nuestros temas solo con tablas de 1x1, es decir una sola celda.
      Esto es algo relativamente fácil de hacer, solo debemos fijar una anchura grande. Es importante recordar que también se pueden utilizar cualquier otro tipo de BBCode en las tablas, por ejemplo dentro de una celda, pueden poner otra tabla.


      Aquí el siguiente título, con una anchura de 700, alineado central, color de fondo de nuestra única celda #009900, color de la fuente blanco o #FFFFFF de tamaño 5.


      AQUÍ VA NUESTRO TITULO




      Es importante ver los saltos de linea que dimos, de igual manera, pueden intentar lo que sea :)



      Para finalizar, les dejo ejemplos de temas que utilizaron tablas para verse mejor estéticamente y quizá no se habían dado cuenta.


      Utilizando bordes de fuera (Capítulo I)
      Colores de fondo y anchura (Capítulo II y III)
      Utilizando Títulos (Capítulo IV)


      SALUDOS!
      Goresito
      Last edited by Goresito; 16/10/2014, 20:05.



      Spoiler: 
      skov <33


      Comment


      • #4
        Adiós al truco secreto del color. Mientras que del Dota siga en secreto; si lo contas te baneo [?]
        Buen aporte, al menos explica de manera detallada cómo funcionan las tablas. Es una buena manera de decorar una tabla y que no quede tan simple; aunque hay algo que odio y es el grosor de la línea de la cuadrícula.
        Last edited by Smile.; 16/10/2014, 19:59.

        Comment


        • #5
          Iniciado por Smile. Ver mensaje
          si lo contas te baneo [?]
          Si antes no volvías, ahora menos :c
          También odio la linea de la cuadrícula xD decile a CP que añada más propiedades >__<



          Spoiler: 
          skov <33


          Comment


          • #6
            Líneas negras delgadas

            Iniciado por Smile Ver mensaje
            aunque hay algo que odio y es el grosor de la línea de la cuadrícula.
            Iniciado por Goresito Ver mensaje
            También odio la linea de la cuadrícula xD decile a CP que añada más propiedades >__<
            Bueno . . . estaba hoy preparando una guía, cuándo dí con la solución a nuestro problema por el grosor de las tablas.
            Cómo es tema es algo viejo, vamos a recapitular:

            En las propiedades de la tabla cuándo usamos el editor, nos ofrece 3 opciones:

            Sin Bordes

            1 2 3
            4 5 6
            Borde exterior

            1 2 3
            4 5 6
            Cuadrícula completa

            1 2 3
            4 5 6
            Las propiedades usadas en el tag [table] de los ejemplos son las siguientes:

            Tipo de Línea Código del tag/etiqueta Valor de "class"
            Sin Bordes [table="align: center"]
            Borde exterior [table="class: outer_border, align: center"] outer_border
            Cuadrícula completa [table="class: grid, align: center"] grid
            Notar que se pueden pasar varios parámetros a la vez a una etiqueta, separando la información con una "coma" (,), y adicionalmente hemos agregado "align: center" para centrar las tablas.
            En lo que respecta al aspecto de la cuadrícula, la información se entrega mediante el parámetro "class", según se indica en la última columna. Notar que no es necesario entregar la información de "class" para que las líneas desaparezcan, y lo mismo pasa si se escribe pero se deja en blanco el argumento (por ejemplo usar: [table="class:"])

            Ahora bien . . . seguramente ya se dieron cuenta en el aspecto de la tabla anterior, pero existe otra clase oculta para usar líneas por defecto (grosor de 1 pto en color negro) en las cuadrículas: "class: pipeboy"

            class: pipeboy: 

            Cuadrícula completa a línea simple

            1 2 3
            4 5 6
            código del tag: [table="class: pipeboy, align: center"]

            Nah, el nombre es broma. Funciona con cualquier valor que le entreguen a class que no sea de los listados en la tabla ("en blanco", outer_border, grid). Perfectamente podrían obtener el mismo resultado entregando el valor "pipeboy 2", "test", "asdf" o "le_hago_publicidad_descarada_a_mi_guarderia", sólo no usen caracteres especiales ni símbolos raros.
            Al parecer si no está definido en la hoja de estilo del foro, regresa a la configuración por defecto que sería en estas líneas finas de color negro.


            Espero que esta opción esté operativa largo tiempo ¿?
            Hasta pronto.
            Guardería ya en 7ª gen. -> Pasa a revisar

            gracias a Onix Tymime por la firma.
            otras firmas: 



            gracias a AnnieSvdh por la firma

            Comment

            Working...
            X