Cómo crear una tabla

De YPPedia

Una tabla es una forma de representar mucha información de manera esquematizada, ordenada y compacta. Aunque se acepta el código HTML para la creación de tablas, posee también un código propio que da un resultado bastante más limpio y compacto.

Los códigos de las tablas son relativamente simples pero el resultado final a menudo aparenta ser muy confuso a primera vista. Puedes practicar las tablas en la zona de pruebas sin necesidad de hacerlo en artículos ya creados.

Conceptos Básicos

Adaptado de Wikipedia
  • La tabla entera comienza con una línea "{| parámetros opcionales para la tabla " y finaliza con la línea "|}".
  • Una leyenda opcional se incluye con la línea "|+ leyenda " después de "{|".
  • El código de una fila consiste en una línea "|- parámetros opcionales para la tabla " y los códigos para las celdas de la fila, comenzados por una línea "|".
  • Datos de tabla son los códigos para las celdas; el código de la celda está formado por "| valor " o "| parámetros de celda | valor ".
  • Una fila de títulos de columna se identifica usando "!" en lugar de "|", excepto para la separación entre un parámetro de celda y un valor; la diferencia con una fila normal depende del navegador, los títulos de columna están frecuentemente presentados en negritas.
  • La primera celda de la fila es identificada como fila de títulos si comienza la línea con "!" en lugar de "|", y comienzan las subsecuentes celdas de datos en una nueva línea.

Los parámetros de tabla y de celdas son los mismos como en HTML (wiki en inglés), sin embargo los elementos thead, tbody, tfoot, colgroup y col actualmente no son soportados en MediaWiki.

Una tabla puede ser útil aún si ninguna de sus celdas tiene contenido, notablemente porque con el uso de colores de fondo de celdas la tabla puede ser un diagrama. Una "imagen" en forma de una tabla es mucho más conveniente para editar una imagen subida.

Cada fila debe tener el mismo número de celdas que las otras filas, así la cantidad de columnas en la tabla continúa siendo consistente (a menos que haya celdas que abarquen varias columnas o filas, vea colspan y rowspan en ejemplo mezcla más abajo). Para celdas vacías, use el espacio “non-breaking”   como contenido para asegurar que las celdas sean mostradas.

Ejemplos

Ejemplo simple

{| 
| Celda 1, Fila 1
| Celda 2, Fila 1
|- 
| Celda 1, Fila 2 
| Celda 2, Fila 2 
|}

y 

{| 
| Celda 1, Fila 1 || Celda 2, Fila 1 
|- 
| Celda 1, Fila 2 || Celda 2, Fila 2 
|}

ambos generan

Celda 1, Fila 1 Celda 2, Fila 1
Celda 1, Fila 2 Celda 2, Fila 2

Sintaxis Avanzada

  • Para la creación de bordes más complejos y alterar el texto y el fondo de la tabla se puede usar el parámetro 'style='. Para hacer que afecte a la tabla completa debe ponerse después del primer símbolo {| pero en la misma línea. Para que afecte solamente a una fila se añade después del primer símbolo |- en la fila relevante. Para afectar una sola celda debe anotarse después del código de esa celda, separado por una pipeta |. Algunos de los términos más comunes que se usan con el parámetro style= son:
    • 'color:' Cambia el color del texto. El valor después de los dos puntos debe ser el nombre de un estándar, por ejemplo, color:red o color:white. Puedes ver una lista de colores estándar para tablas en Wikipedia.
    • 'background:' Cambia el color del fondo. El valor después de los dos puntos debe ser el nombre de un estándar, por ejemplo, background:blue o background:silver.
    • 'text-align:' Especifica en que parte de la celda se anotará el texto. El valor después de los dos puntos debe ser left (izquierda), right (derecha) o center (centro).
    • 'font-style:' Establece las características especiales de la fuente, por ejemplo bold (negritas), italic (itálica), etc.
    • 'font-size:' Establece el tamaño de la fuente. El valor después de los dos puntos debe ser un porcentaje, por ejemplo, font-size:110%
    • 'border:' Define el borde. El valor después de los dos puntos debe ser el ancho del borde en pixeles, un espacio, line style (estilo de la raya), un espacio y después el color del borde, por ejemplo, border:2px dashed blue)

Cuando se usa más de uno de los anteriores en la definición de un parámetro 'style=' parameter cada uno deberá estar separa por un punto y coma y un espacio. Además, todos los valores deberán estar entre comillas; por ejemplo, style="color:white; background:blue".

Veamos un ejemplo: 

{|style="color:white; background:black; border:2px dashed blue"
|+Título de la tabla 
|- style="color:white; background:blue"
!Columna1!!Columna2!!Columna3
|-
!Fila1 
|style="color:white; background:black; border:2px dashed blue"|Col 2 Fila1
|Col 3 Fila1
|-
!Fila2 
|Col 2 Fila2
|Col 3 Fila2
|}
Título de la tabla
Columna1 Columna2 Columna3
Fila1 Col 2 Fila1 Col 3 Fila1
Fila2 Col 2 Fila2 Col 3 Fila2


Ejemplo de tabla dinámica

Tabla dinámica sin encabezado

{| border="0" style="background:#ffffff" align="top" class="sortable wikitable"
! width="80 px" style="background:Lavender; color:Black"|Título 1
! width="80 px" style="background:Lavender; color:Black"|Título 2
! width="100 px" style="background:Lavender; color:Black"|Título 3
! width="120 px" style="background:Lavender; color:Black"|Título 4
! width="140 px" style="background:Lavender; color:Black"|Título 5
|-
|info 1||info 2||info 3||info 4||info 5
|-
|info 6||info 7||info 8||info 9||info 10
|}

Ese código genera la siguiente tabla:

Título 1 Título 2 Título 3 Título 4 Título 5
info 1 info 2 info 3 info 4 info 5
info 6 info 7 info 8 info 9 info 10

Tabla dinámica con encabezado

{| border="0" style="background:#ffffff" align="top" class="sortable wikitable"
|+ align="center" style="background:DarkSlateBlue; color:white"|<big>'''Encabezado de la tabla'''</big>
! width="80 px" style="background:Lavender; color:Black"|Título 1
! width="80 px" style="background:Lavender; color:Black"|Título 2
! width="100 px" style="background:Lavender; color:Black"|Título 3
! width="120 px" style="background:Lavender; color:Black"|Título 4
! width="140 px" style="background:Lavender; color:Black"|Título 5
|-
|info 1||info 2||info 3||info 4||info 5
|-
|info 6||info 7||info 8||info 9||info 10
|}

Ese código genera la siguiente tabla:

Encabezado de la tabla
Título 1 Título 2 Título 3 Título 4 Título 5
info 1 info 2 info 3 info 4 info 5
info 6 info 7 info 8 info 9 info 10


Ajustando el ancho de las columnas

Si quiere forzar el ancho de columna a sus propios requerimientos más que aceptar el ancho del mayor elemento en una celda de una columna entonces siga este ejemplo. Note que el espacio alrededor del texto está impuesto. 

{| border="1" cellpadding="2"
!width="50"|Juego
!width="125"|Arma que se usa
!width="225"|Donde se encuentra
|-
|Camorra
|Cachiporra
|Todas las tabernas
|-
|Esgrima
|Espada
|Todas las tabernas
|}
Juego Arma que se usa Donde se encuentra
Camorra Cachiporra Todas las tabernas
Esgrima Espada Todas las tabernas

Ver También

Obtenido de «https://yppedia.puzzlepirates.com/es/index.php?title=Cómo_crear_una_tabla&oldid=32275»