1. Invitado La navidad llego a Cz, ¿Por que no vas a visitar la choza de Santa Cooz?
  2. Invitado ¿Puedes jugar sin repetir palabra?
    Descartar aviso
  3. Invitado ¿Por que no derribas a un que otro adversario con una bola de nieve?
    Descartar aviso
  4. Invitado Faltando tan solo unas pocas horas para navidad, alguien a quien no le gusta esta festividad, decidió sorprender a santa, raptarlo, atarlo y robar los regalos que llevaba consigo.
    Descartar aviso
  5. Invitado Esta vez el grinch esta en CemZoo y quiere tener su propio arbol para ponerlo en su casa pero no quiere cualquiera, tiene que ser creativo y unico el cual escogerá.
    Descartar aviso

Tutorial sobre tablas

Tema en 'Plaza CemZoo, Sugerencias y Preguntas al CZ Team' iniciado por Soma Cruz, 16 Abril 2007.

Cargando...
  1.  
    Soma Cruz

    Soma Cruz Creador del tema Cemzoonita

    Escorpión
    Puede usar tablas para organizar mejor la información y darle una mejor apariencia. Recuerda que también puedes puedes añadir imágenes a las tablas.

    Para crear una tabla, puedes usar el código HTML o el del wiki. A continuación encontrarás lo que necesitas saber para crear tablas, ya sea con código HTML o con el de wiki.

    Secciones:


     
  2.  
    Soma Cruz

    Soma Cruz Creador del tema Cemzoonita

    Escorpión

    Lo básico​



    Para crear y empezar una tabla, tienes que escribir lo siguiente:

    NOTA: Todo los tags de que aparecen van sin las comillas ( " )

    Código HTML:

    " <table> " : da inicio a una tabla. Cuando termines una tabla, tienes que escribir el tag de cierre, el cual es </table>

    Código Wiki:

    " {| " : con esto das inicio a la tabla. Para cerrar la tabla, tienes que escribir " |} "

    Ahora, tienes que empezar a armas la tabla. Todas las tablas estan compuestas por filas y columnas y la intersección entre ellas se llaman celdas.


    Filas

    Las tablas se van armando fila por fila. Primero se define una fila y luego se pasa a la siguiente, y luego otra, etc.


    Para el código HTML, los tag de fila son los siguientes:

    " <tr> " : da inicio a una fila. Para cerrar una fila, usaremos el tag " </tr> "

    Para el código Wiki:

    " |- " : da inicio a la fila. No tiene cierre.


    Columnas

    Para ir creando las columnas, harémos celdas. Todas las filas deberán tener el mismo numero de celdas o columnas.

    Para el código HTML usaremos lo siguiente

    " <td> Contenido de la celda </td> "

    Para el código Wiki, escribiremos lo siguiente:

    " | " : crea una celda.

    Hay dos formas de escribirlo y puedes usar el que mas se te acomode

    Forma 1:

    |celda 1
    |celda 2
    |celda 3

    Forma 2:

    |celda1||celda2||celda3[

    Todo esto va entre una fila y otra.

    Ahora, veremos un ejemplo simple, creando una tabla de una 2 filas y 4 columnas (que es lo mismo que una tabla de 2 filas con 4 celdas cada una)

    Con código HTML:

    <table>
    <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
    <td>Celda 4</td>
    </tr>

    <tr>
    <td>Celda 1</td>
    <td>Celda 2 </td>
    <td>Celda 3 </td>
    <td>Celda 4</td>
    </tr>
    </table>

    Con código Wiki:

    {|
    | Celda 1
    | Celda 2
    | Celda 3
    | Celda 4
    |-
    | Celda 1
    | Celda 2
    | Celda 3
    | Celda 4
    |}


    ó

    {|
    | Celda 1 || Celda 2 || Celda 3 || Celda 4
    |-
    | Celda 1 || Celda 2 || Celda 3 || Celda 4
    |}


    Si hacemos esto, la tabla quedará así:

    [imagen]799383[/imagen]

    Si no escribes nada en una celda, dicha celda no se mostrará. Si quieres dejar una celda en blanco y que se muestre, escribe la palabra " &nbsp ".

    Bien, esto es lo mas básico en la creación de tablas. Ahora pasaremos a otras opciones.
     

    Archivos adjuntos:

  3.  
    Soma Cruz

    Soma Cruz Creador del tema Cemzoonita

    Escorpión
    Bordes


    Bordes

    Hasta ahora, la tabla que hemos hecho carece de bordes que definan a la tabla o a las celdas. Para agregar un borde a una tabla debemos de escribir el atributo " border=# " después del tag que inicia la tabla. El " # " es un número que especificará el grosor del borde. Entre mayor sea el número, mas grueso será el borde.

    Para codigo HTML, lo pondremos así:

    " <table border=#> "

    Para código Wiki, así:

    " {| border=# "

    Así, una tabla con borde de número 1 quedaría así:

    Con HTML:

    <table border=1>
    <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
    <td>Celda 4</td>
    </tr>

    <tr>
    <td>Celda 1</td>
    <td>Celda 2 </td>
    <td>Celda 3 </td>
    <td>Celda 4</td>
    </tr>
    </table>


    Con Wiki:

    {| border=1
    | Celda 1
    | Celda 2
    | Celda 3
    | Celda 4
    |-
    | Celda 1
    | Celda 2
    | Celda 3
    | Celda 4
    |}


    Y quedaría algo así:

    [imagen]799401[/imagen]
     

    Archivos adjuntos:

  4.  
    Soma Cruz

    Soma Cruz Creador del tema Cemzoonita

    Escorpión
    Re: Bordes


    Ancho y alto

    Puedes cambiar el ancho y el alto de una tabla o de una celda al tamaño que desees. Si no especificas el ancho o el alto de una fila o una columna, el tamaño de estas dependerá de lo que este escrito dentro de las celdas.

    Aquí un ejemplo

    [imagen]799402[/imagen]

    Para cambiar el ancho de toda la tabla, escribirás el atributo " width=# " después del tag que inicia la tabla. El "#" que escribas será lo ancho de la tabla y puede ir en pixeles ( " width=#px " ) o en porcentaje (" width=#% "). Si lo escribes en pixeles, el ancho de la tabla será del numero de pixeles que especificaste. Si escribes " width=350px ", la tabla tendrá un ancho de 350 pixeles.

    Si decides hacerlo en porcentaje, el numero del porcentaje corresponde a la porción de la pantalla que ocupará. Si escribes " width=50% " la tabla ocupará el 50% de la pantalla. Cabe destacar que es el tamaño de la pantalla y no el de la página.

    El ancho de las columnas dependerá de lo que este escrito y se adecuará de acuerdo al ancho de la tabla.

    Para hacerlo en código HTML, escribirás esto:

    " <table width=#>

    Y para el Wiki:

    " {| width=#> "

    Hasta ahora, ya especificaste el ancho de de la tabla. Lo alto de las filas variarán segun lo que tengas escrito dentro de las celdas. Si el texto de una celda es muy grande y el ancho de la tabla o de la celda es mas pequeño, pasará un renglón. Sigamos con el ejemplo anterior.

    [imagen]799403[/imagen]

    Aquí especifiqué un ancho de la tabla de 400 pixeles. Como el texto de la Celda 1, Fila 1 y el de la Celda 4, Fila 2 es muy grande, tuvo que pasarse a otro renglón. Para especificar el alto de la tabla, usaremos el atributo " height=# ". El similar al de width y acepta el numero en pixeles o en porcentaje.

    Retomando el ejemplo anterior, al que le agregamos la altura de la tabla, la cual es de 150 pixeles. Queda algo así:

    [imagen]799404[/imagen]

    Estos atributos también son aplicables para las celdas y/o las filas. Si cambias el alto de una fila o de una celda, todas las celdas de esa fila cambiarán su altura. No podrás cambiar el ancho de una fila entera, pero si el de una celda, lo que alterará a toda la columna en la que se encuentre.

    Para cambiar el alto de una fila / celda o el ancho de una celda, solo tienes que ponder los atributos después del tag correspondiente ( " <tr> " ó " |- " para filas y " <td> " ó " | " para celdas) pero en el códifo de wiki tendrás que poner otro " | " antes de escribir el contenido.

    Aplicando todo lo anterior, haremos una tabla con las siguientes características:

    - 2 filas
    - 4 columnas
    - Borde del numero 1
    - Ancho del 50%
    - Alto del 30%

    Con código HTML:

    <table border=1 width=50% height=30%>
    <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
    <td>Celda 4</td>
    </tr>

    <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
    <td>Celda 4</td>
    </tr>
    </table>


    Con WIki:

    {| border=1 width=50% height=30%
    | Celda 1
    | Celda 2
    | Celda 3
    | Celda 4
    |-
    | Celda 1
    | Celda 2
    | Celda 3
    | Celda 4
    |}
     

    Archivos adjuntos:

  5.  
    Soma Cruz

    Soma Cruz Creador del tema Cemzoonita

    Escorpión
    Alineación


    Alineación


    Puedes alinear una tabla, ya sea centrada o a la derecha (ya que a la izquierda es el valor predeterminado). Para alinear una tabla, usaremos el atributo " align=posición " y lo colocaremos después del tag de creación de tabla (donde ponemos el ancho, alto, borde, etc). En posición escribirás " center " si quieres la tabla centrada al centro de la pantalla o " right " si la quieres alineada a la izquierda.

    Lo mismo puedes hacer con las celdas, aunque aquí lo que realmente se alinea es el contenido de estas. Usarás el mismo atributo después del tag de la celda. Además, también aquí puedes alinear el texto verticalmente, ya en la parte superior, al centro (predeterminado) o en la parte inferior de la celda. Para hacer esto, tienes que escribir el atributo " valign=posición " después del tag de la celda. Para alinear el texto en la parte superior tienes que escribir en donde va posición la palabra " top ", si lo quieres en la parte inferior escribe " bottom ". Puedes combinar ambas alineaciónes (solo en las celdas).

    Aquí un ejemplo de la alineación de texto de las celdas (centrado al centro de la pantalla):

    Con código HTML:

    <table align=center border=1 width=50% height=30%>
    <tr>
    <td>Normal</td>
    <td align=center>Centrado</td>
    <td align=right>A la derecha</td>
    <td valign=top>Normal arriba</td>
    </tr>

    <tr>
    <td valign=bottom>Normal abajo</td>
    <td align=center valign=top>Centrado arriba</td>
    <td align=center valign=top>Centrado abajo</td>
    <td align=right valign=top>A la derecha arriba</td>
    </tr>
    </table>

    Con el Wiki:

    {| border=1 width=50% height=30%
    | Normal
    | align=center | Centrado
    | align=right | A la derecha
    | valign=top | Normal arriba
    |-
    | valign=bottom | Normal abajo
    | align=center valign=top | Centrado arriba
    | align=center valign=top | Centrado abajo
    | align=right valign=top | A la derecha arriba
    |}


    Y quedá así:

    [imagen]799405[/imagen]
     

    Archivos adjuntos:

  6.  
    Soma Cruz

    Soma Cruz Creador del tema Cemzoonita

    Escorpión
    Re: Alineación


    Espacios​




    Cellspacing.

    Este atributo va después del tag que da inicio a la tabla. Sirve para definir el espacio que separa las celdas. Se define por pixeles. Para hacer esto, tienes que escribir esto: " cellspacing=# ". Donde el " # " es el número de pixeles.

    Código HTML:

    " <table border=1 cellspacing=5> "

    Con Wiki:

    " {| border=1 cellspacing=5 "

    Esto hará que es espacio entre cada celda sea de 5 pixeles. Aquí un ejemplo:


    [imagen]799406[/imagen]


    Cellpadding


    Este atributo va después del tag que da inicio a la tabla. Sirve para definir el espacio que al contenido de la una celda del borde de la esta. Se define por pixeles. Para hacer esto, tienes que escribir esto: " cellpadding=# ". Donde el " # " es el número de pixeles.

    Código HTML:

    " <table border=1 cellpadding=5> "

    Con Wiki:

    " {| border=1 cellpadding=5 "

    Esto hará que es espacio entre el texto de la celda y su borde sea de 5 pixeles. Aquí un ejemplo, combinado con la tabla anterior:

    [imagen]799407[/imagen]
     

    Archivos adjuntos:

  7.  
    Soma Cruz

    Soma Cruz Creador del tema Cemzoonita

    Escorpión
    Re: Alineación


    Encabezados​



    Puedes poner encabezados para usarlos como títulos dentro de una tabla. Esto va al principio de la tabla, después de abrir la tabla y poner sus atributos.

    Para código HTML, escribirás lo siguiente:

    " <th> Contenido del encabezado </th> "

    Para el Wiki:

    " ! "

    Aquí un ejemplo:

    Con HTML:

    <table border=1 cellspacing=5 cellpadding=5>
    <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
    <th>Encabezado 3</th>
    <th>Encabezado 4</th>
    </tr>

    <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
    <td>Celda 4</td>
    </tr>

    <tr>
    <td>Celda 1</td>
    <td>Celda 2 </td>
    <td>Celda 3 </td>
    <td>Celda 4</td>
    </tr>
    </table>

    Con WIki

    {| border=1 cellspacing=5 align=center cellpadding=5
    ! Encabezado 1
    ! Encabezado 2
    ! Encabezado 3
    ! Encabezado 4
    |-
    | Celda 1
    | Celda 2
    | Celda 3
    | Celda 4
    |-
    | Celda 1
    | Celda 2
    | Celda 3
    | Celda 4
    |}

    Y queda esto:

    [imagen]799408[/imagen]
     

    Archivos adjuntos:

  8.  
    Soma Cruz

    Soma Cruz Creador del tema Cemzoonita

    Escorpión
    Re: Alineación


    Unir filas y columnas


    Existe la posibilidad de unir varias celdas de una columna o de una fila, con el fin de añadir información mas grande y que quede mejor. Para unir las celdas de una fila (horizontalmente) usamos el atributo " colspan=# " donde " # " es el número de celdas a unir; para unir celdas de una columna, usamos " rowspan= # ". Ambos atributos se escriben después de poner el tag que crea una celda.

    Colspan para HTML:

    "<td colspan=#> contenido de la celda"

    Para Wiki:

    "| colspan=# | contenido de la celda"

    Ahora, rowspan para HTML:

    "<td rowspan=#> contenido de la celda "

    Para Wiki:

    "| rowspan=# | contenido de la celda “

    Aqui un ejemplo:

    Con HTML:

    <table border=1 cellspacing=5 align=center cellpadding=5 height=50%>
    <tr>
    <td colspan=2>Colspan. Celdas # 1 y 2 de la primera fila</td>
    <td>Celda 3</td>
    <td rowspan=2>Rowspan. Celdas # 4 de las filas 1 y 2</td>
    </tr>

    <tr>
    <td>Celda 1</td>
    <td>Celda 2 </td>
    <td>Celda 3 </td>
    </tr>
    </table>

    Con wiki:

    {| border=1 width=50% height=30%
    | colspan=2 | Colspan. Celdas # 1 y 2 de la primera fila
    | Celda 3
    | rowspan=2 | Rowspan. Celdas # 4 de las filas 1 y 2
    |-
    | Celda 1
    | Celda 2
    | Celda 3
    |}


    Lo que resultaría así:

    [imagen]799409[/imagen]
     

    Archivos adjuntos:

Comparte esta página