Ir al contenido

Ayuda:Tablas

De Wikipedia, la enciclopedia libre
Ayuda de edición
Antes de comenzar
Cómo se edita una página
La interfaz de Wikipedia
Barra de herramientas de edición
Creación de un artículo
Manual de estilo
Estructura de un artículo
Cómo cambiarle el título (convenciones, restricciones técnicas)
Cómo empezarlo
Cómo redactarlo mejor
Cómo añadirle imágenes (política de imágenes)
Cómo referenciarlo (política de verificabilidad)
Cómo categorizarlo
No lo firmes (política de derechos de autor y páginas de autopromoción)
Clases de artículos
Los espacios de nombres
Modelos · Anexos · Redirecciones
Uso de MediaWiki
Cronologías · Listas · Tablas · Columnas
Notas · Enlaces externos
Plantillas · Mapas de imágenes
Caracteres especiales
Palabras mágicas · ParserFunctions
Fórmulas LaTeX
Más ayuda
Preguntas idiomáticas
Transliteración
Dónde colaborar
Contenidos de ayuda
Recursos
Recursos libres
Imágenes de dominio púbilico
Ejemplos de peticiones de permiso
Más recursos y herramientas

En Wikipedia, una tabla es una forma de representar mucha información de manera esquematizada, ordenada y compacta. Aunque Wikipedia acepta el código HTML para la creación de tablas como en cualquier página web, posee también un código propio, cuya sintaxis basada en barras verticales resulta bastante más limpia y compacta.

Sintaxis con barras verticales

[editar]
  • La tabla entera comienza con una línea {| parámetros opcionales para la tabla y finaliza con la línea |}.
  • Se puede incluir opcionalmente alguna leyenda con la línea |+ leyenda después de {|.
  • El código de una fila consiste en una línea |- parámetros opcionales para la fila.
  • Datos de tabla son los códigos para las celdas. El código de la celda está formado por | valor, pero opcionalmente puede parametrizarse con | parámetros de celda | valor.
  • Una fila de títulos de columna se identifica usando ! en lugar de |, excepto para separar un parámetro de celda de su 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, ver [1] (página en inglés) y HTML element#Tables (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 aun si ninguna de sus celdas tiene contenido, notablemente porque con el uso de colores de fondo de celdas la tabla puede ser un diagrama; véase por ejemplo Ajedrez#El tablero de ajedrez. En algunos casos, una "imagen" en forma de tabla es mucho más conveniente para ser editada que un archivo de imagen propiamente dicho.

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, véase 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.

Tipos de tablas predefinidos: (class="wikitable")

[editar]

Como se expone a continuación, para simplificar el problema del código redundante necesario en muchas ocasiones para definir tablas por el procedimiento descrito anteriormente, se dispone de la opción class="wikitable", que facilita TABLAS PREDEFINIDAS (que aquí se denominan de forma abreviada Wikitablas), dotadas de una apariencia estandarizada, y que son mucho más fácilmente configurables y con menos necesidad de código que las aquí denominadas a partir de ahora Tablas normales (es decir, las que no tienen declarado el parámetro "class=").

Ejemplo [1]
  • Como ya se ha indicado anteriormente, cuando se utilizan las herramientas básicas de generación de tablas, se deben especificar prácticamente todas las características que atañen a su presentación, como por ejemplo las líneas que separan las celdas, el contorno de la tabla, o el centrado del texto en las celdas. Para una tabla bastante sencilla como la siguiente (con líneas simples de separación entre celdas, y los textos centrados):


Fila 1, columna 1 Fila 1, columna 2
Fila 2, columna 1 Fila 2, columna 2
habría que escribir todo este código:
{|width="300px" align="center" style="border: 1px solid #ccc;" cellpadding="2" cellspacing="0" bgcolor="#f9f9fa"
|-
|style="border: 1px  solid #ccc" align="center"|Fila 1, columna 1
|style="border: 1px  solid #ccc" align="center"|Fila 1, columna 2
|-
|style="border: 1px solid #ccc" align="center"|Fila 2, columna 1
|style="border: 1px solid #ccc" align="center"|Fila 2, columna 2 
|}
Para obtener una tabla aproximadamente equivalente a la anterior, utilizando una Wikitabla:


Fila 1, columna 1 Fila 1, columna 2
Fila 2, columna 1 Fila 2, columna 2
habría que escribir solo este código:
{|class="wikitable col1cen col2cen center" style="width:300px" 
|-
||Fila 1, columna 1
||Fila 1, columna 2
|-
||Fila 2, columna 1
||Fila 2, columna 2 
|}
Ejemplo [2]
  • En el ejemplo siguiente se muestran dos tablas similares, una elaborada como una Tabla normal, y la otra como una Wikitabla. En este caso, la diferencia de tamaño del código no es tan evidente como en el caso anterior porque ha sido necesario personalizar las celdas de la Wikitabla.
Para la Tabla normal se tiene:
TÍTULO: (Tabla Simple)
Primera celda roja Segunda celda verde
<!--TABLA NORMAL: -->
{|align="center"
|align="center" style="color:white" bgcolor="blue" colspan=2|'''TÍTULO: (Tabla Simple)'''
|-
|align="center" style="width:150px;color:white" bgcolor="red" |Primera celda roja
|align="center" style="width:150px;color:white;background:green;"|Segunda celda verde
|}
y en el caso de la Wikitabla:
TÍTULO: (Wikitable)
Primera celda roja Segunda celda verde
<!--WIKITABLA:-->
{|class="wikitable col1cen col2cen center" style="width:300px;"
|+ style="color:white;background:blue;"|'''TÍTULO: (Wikitable)'''
|-
|style="width:150px;color:white;background:red;"|Primera celda roja
|style="width:150px;color:white;" bgcolor="green"|Segunda celda verde
|}
Comparando el código de las dos tablas, se observa que como en el ejemplo anterior, aun teniendo determinados elementos de su código en común, no existe una compatibilidad total de formato entre Wikitablas y Tablas normales, lo que hace recomendable saber qué tipo de tabla se va a necesitar en cada caso antes de escribirla, porque la transformación entre los dos tipos puede ser muy laboriosa.


  • En consecuencia, ES IMPORTANTE DE AQUÍ EN ADELANTE, RECORDAR QUE:
  • Parámetros de formato QUE AFECTAN A TODA LA TABLA: (van incluidos en su cabecera)
  • Cuando se utiliza class="wikitable", el formato de los parámetros necesarios para configurar una tabla es similar (pero NO IGUAL) al que se usa en caso contrario. En los diferentes ejemplos del presente artículo se muestran distintos casos, en los que no siempre se utilizan Wikitablas.
  • Respecto a estos parámetros que afectan a toda la tabla, se señala que:
  • Las Wikitablas tienen sus propias instrucciones, muchas de las cuales no funcionan en las Tablas normales (por ejemplo, instrucciones como (col1cen), que permiten centrar el texto en todas las celdas de la primera columna de una sola vez)
  • Así mismo, las Tablas normales disponen de instrucciones que tampoco funcionan en las Wikitablas (como por ejemplo (width="300px") para indicar el ancho de la tabla; la orden equivalente para una Wikitabla es (style="width:300px;"))
  • Y que algunas instrucciones, funcionan en los dos tipos de tabla (como la instrucción (border="1"), que dispone bordes dobles en toda la tabla en ambos casos)
  • Parámetros que afectan a FILAS COMPLETAS O A CELDAS INDIVIDUALES:
  • Normalmente funcionan de forma indistinta, aunque las Tablas normales suelen tener menos restricciones que las Wikitablas.
  • Como en el caso de las cabeceras, coexisten formatos de parámetros compatibles entre los dos tipos de tablas, con otros que no lo son. Esto obliga a mantener la atención acerca del tipo de tabla con el que se está trabajando (especialmente cuando se toma parte del código de los ejemplos disponibles para ser usado sin tener en cuenta este problema), evitando que la mezcla indebida de formatos proporcione resultados erróneos o inesperados.
  • RECOMENDACIÓN: Por último, la recomendación es utilizar las Wikitablas para los casos más habituales, reservando las Tablas normales (más versátiles, pero también más laboriosas de confeccionar) solo para casos especiales que no es posible resolver con las Wikitablas.

Ejemplos

[editar]

Ejemplo simple

[editar]

Los bloques de código fuente:

{|class="wikitable"
| Celda 1, Fila 1
| Celda 2, Fila 1
|- 
| Celda 1, Fila 2 
| Celda 2, Fila 2 
|}

y

{|class="wikitable" 
| 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

Alineación de columnas

[editar]

Para alinear las columnas a la izquierda, derecha o centro, se utilizan las clases “colnizq”, “colnder” y “colncen”, donde n se reemplaza por el número de columna. Para anular esta preferencia en una celda particular, se puede usar style="text-align:..." en la misma celda.

Este código:
{| class="wikitable col1der col2cen col3izq col4der"
| Columna 1 a la derecha
| &nbsp;&nbsp;&nbsp;&nbsp;Columna&nbsp;2&nbsp;centrada&nbsp;&nbsp;&nbsp;&nbsp; <!-- los nbsp para que sea más ancha -->
| Columna 3 a la izquierda
| Columna 4 a la derecha 
|-
| abcde || abcde || abcde || abcde
|-
| fghij
| style="text-align:left" | alineación “sobreseída”
| fghij
| fghij
|}
Columna 1 a la derecha     Columna 2 centrada     Columna 3 a la izquierda Columna 4 a la derecha
abcde abcde abcde abcde
fghij alineación “sobreseída” fghij fghij

Las clases no cambian la alineación de los encabezados, solo de las celdas comunes.

Las clases "colnder", "colnizq" o "colncen", no funcionan de modo regular si en la tabla se han unido varias celdas (mediante "colspan" o "rowspan").

Ejemplo de tabla dinámica

[editar]

Tabla dinámica sencilla

[editar]
El código fuente:
{| class="wikitable"
! 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
|}
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 y varios parámetros

[editar]

El código fuente:

{| class="wikitable"
|+ style="background:DarkSlateBlue; color:white; text-align:center;"|'''Encabezado de la tabla'''
|- style="background:Lavender; color:black"
! width="60 px" |Título 1
! width="80 px" |Título 2
! width="100 px" |Título 3
! width="120 px" |Título 4
! width="140 px" |Título 5
|-
|info 1||info 2||info 3||info 4||info 5
|-
|info 6||info 7||info 8||info 9||info 10
|}

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

Tabla de multiplicar

[editar]

Hemos complicado un poco esta tabla poniendo atributos de alineación a celdas y a filas enteras para que se pueda apreciar cómo se ponen los atributos a nivel de fila y a nivel de celda cuando las celdas se escriben sobre la misma línea de código.

Obsérvese también que NO se pueden mezclar en una misma línea de código una celda de datos y una celda de título.

El código fuente:
{| border="1" cellpadding="2"
|+ Tabla de multiplicar
|-
! &times; !! align="right" | 1 !! align="right" | 2 !! align="right" | 3
|-
! align="right" | 1
| align="right" | 1 || align="right" | 2 || align="right" | 3
|- align="right"
! 2
| 2 || 4 || 6
|- align="right"
! 3
| 3 || 6 || 9
|- align="right"
! 4
| 4 || 8 || 12
|- align="right"
! 5
| 5 || 10 || 15
|}
Genera la tabla:


Tabla de multiplicar
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

Color; alcance de los parámetros

[editar]

Hay dos formas de especificar el color del texto y del fondo para cada celda individualmente:

El código fuente:
{|style="font-size:200%;" 
| bgcolor="red" | <span style="color:white" > abc </span>
| def
| style="background:red; color:white" | ghi
| jkl
|}
Produce la tabla:

abc def ghi jkl

Como se ve <span style="color:white"> funciona para una sola celda, aun sin etiqueta de cierre: la etiqueta de cierre es añadida por el sistema. (Nota: No se aconseja utilizar esta etiqueta, ya que está desaprobada en HTML 4 en beneficio del atributo style.)

Así mismo, se puede especificar el tamaño del texto y el interlineado, combinando los atributos:
style="font-size:85%;line-height:125%;"

Con el código fuente:
{| class="wikitable" style="width:450px;color:blue;background:pink;"
|style="font-size:200%; line-height:60%;" |TEXTO GRANDE<br/>con interlineado pequeño
|style="font-size:100%; line-height:100%;"|Texto normal<br />con interlineado normal
|style="font-size:50%; line-height:300%;" |Texto pequeño<br/>CON INTERLINEADO GRANDE
|-
|}
Se obtiene:

TEXTO GRANDE
con interlineado pequeño
Texto normal
con interlineado normal
Texto pequeño
CON INTERLINEADO GRANDE

Como otros parámetros, los colores pueden también ser especificados para una fila completa o para una tabla completa; los parámetros para una fila sobrescriben los valores para la tabla, y los de una celda sobrescriben los de la fila:

El código fuente:
{| style="background:yellow; color:green; font-size:200%;"
|- 
| abc
| def
| ghi
|- style="background:red; color:white; font-weight: bold;"
| jkl
| mno
| pqr
|-
| stu
| style="background:silver" | vwx
| yz
|}
Produce:

abc def ghi
jkl mno pqr
stu vwx yz

El comando font-weight: bold; permite que el texto de color blanco aparezca en negrita.

Definición de colores

[editar]

Los nombres de los colores que pueden emplearse en una tabla son:

Nombres de los colores
[editar]
Black DarkGreen MidnightBlue DarkSlateGray Navy Green Maroon DarkBlue DarkRed DarkOliveGreen
ForestGreen Indigo SaddleBrown DarkSlateBlue SeaGreen Brown Teal Purple Olive OliveDrab
DimGray FireBrick Sienna DarkCyan DarkMagenta MediumBlue LimeGreen MediumSeaGreen Gray SlateGray
DarkGoldenrod Crimson SteelBlue Chocolate LightSlateGray MediumVioletRed IndianRed CadetBlue SlateBlue LightSeaGreen
Peru Blue Lime Red RoyalBlue DarkViolet DarkOrchid YellowGreen OrangeRed BlueViolet
Goldenrod DarkSeaGreen RosyBrown LawnGreen Tomato DarkKhaki SpringGreen Chartreuse MediumAquamarine MediumPurple
PaleVioletRed MediumSlateBlue DarkOrange DarkGray DarkTurquoise MediumSpringGreen MediumOrchid DodgerBlue DeepPink Coral
CornflowerBlue LightCoral MediumTurquoise DarkSalmon Salmon Orange SandyBrown Tan GreenYellow Turquoise
LightGreen BurlyWood DeepSkyBlue LightSalmon Orchid HotPink PaleGreen Silver Gold SkyBlue
LightSteelBlue LightSkyBlue Plum Aquamarine LightBlue Thistle Aqua Cyan Fuchsia Magenta
Yellow Khaki Violet LightGrey PowderBlue LightPink PaleGoldenrod Wheat Pink PaleTurquoise
NavajoWhite Gainsboro PeachPuff Moccasin Bisque BlanchedAlmond AntiqueWhite PapayaWhip MistyRose Lavender
Beige LightGoldenrodYellow LemonChiffon Linen Cornsilk OldLace WhiteSmoke Honeydew LightCyan LightYellow
Seashell LavenderBlush AliceBlue FloralWhite MintCream Azure Ivory GhostWhite Snow White
Modelo de color RGB
[editar]

Los colores se pueden definir como la combinación de los tres colores básicos: rojo, verde y azul, según el modelo de color RGB. Para ello se emplea el signo almohadilla (#) seguido de los valores de rojo, verde y azul en hexadecimal, como en los ejemplos siguientes:

#000000 #004400 #008800 #00cc00 #00ff00 #000044 #004444 #008844 #00cc44 #00ff44
#440000 #444400 #448800 #44cc00 #44ff00 #880000 #884400 #888800 #88cc00 #88ff00
#cc0000 #cc4400 #cc8800 #cccc00 #ccff00 #ff0000 #ff4400 #ff8800 #ffcc00 #ffff00
#440044 #444444 #448844 #44cc44 #44ff44 #880044 #884444 #888844 #88cc44 #88ff44
#cc0044 #cc4444 #cc8844 #cccc44 #ccff44 #ff0044 #ff4444 #ff8844 #ffcc44 #ffff44
#000088 #004488 #008888 #00cc88 #00ff88 #440088 #444488 #448888 #44cc88 #44ff88
#880088 #884488 #888888 #88cc88 #88ff88 #cc0088 #cc4488 #cc8888 #cccc88 #ccff88
#ff0088 #ff4488 #ff8888 #ffcc88 #ffff88 #0000cc #0044cc #0088cc #00cccc #00ffcc
#4400cc #4444cc #4488cc #44cccc #44ffcc #8800cc #8844cc #8888cc #88cccc #88ffcc
#cc00cc #cc44cc #cc88cc #cccccc #ccffcc #ff00cc #ff44cc #ff88cc #ffcccc #ffffcc
#0000ff #0044ff #0088ff #00ccff #00ffff #4400ff #4444ff #4488ff #44ccff #44ffff
#8800ff #8844ff #8888ff #88ccff #88ffff #cc00ff #cc44ff #cc88ff #ccccff #ccffff
#ff00ff #ff44ff #ff88ff #ed2afb #f384fb #ffccff #FBD6FF #ffffff #fcfafb #ece6e9
Plantilla {{RGB}}
[editar]

Los colores también se pueden definir a través de la Plantilla:RGB en la que con solo un parámetro que indica el color y un número se precisa la tonalidad deseada, tiene posibilidad de 50 colores con 11 tonalidades cada uno. Para más información consulte la plantilla; acá unos ejemplos:

rojo rojo6 rojo5 rojo1 rojo0
fuego fuego8 fuego6 fuego4 fuego3
arenque arenque8 arenque6 arenque3 arenque0
cacao cacao7 cacao6 cacao1 cacao0
cromo cromo8 cromo7 cromo4 cromo2
cerveza cerveza9 cerveza6 cerveza5 cerveza0
kaki kaki7 kaki5 kaki3 kaki2
pasto pasto5 pasto4 pasto3 pasto2
manzana manzana7 manzana4 manzana3 manzana0
turquesa turquesa5 turquesa3 turquesa2 turquesa0
cian cian9 cian6 cian5 cian0
cobalto cobalto8 cobalto6 cobalto1 cobalto0
enlace enlace6 enlace3 enlace2 enlace0
rey rey7 rey6 rey2 rey0
fresa fresa8 fresa5 fresa4 fresa0

Definición de grosores

[editar]

Las distintas órdenes en las que hay que especificar un grosor (como por ejemplo: style="border: 1px solid;", para fijar el ancho de las líneas de contorno de una tabla) admiten distintas unidades de medida para especificarlas. Así, es posible establecer estos grosores en:

px: se corresponde con la medida en píxeles de la pantalla. Suele ser LA UNIDAD MÁS UTILIZADA en el código-wiki.
pt: similar a px, se corresponde con un punto de la pantalla (no es frecuente en el código-wiki).
pc: corresponde a 12 pt (tampoco se suele usar).
ex: corresponde a la altura de la letra x minúscula en la fuente que se esté utilizando (se utiliza en ocasiones para hacer proporcional el grosor al tamaño de las letras).
em: corresponde a la anchura de la letra M mayúscula en la fuente que se esté utilizando (tiene el mismo uso que ex).
mm: ancho en milímetros en pantalla.
cm: ancho en centímetros en pantalla.
in: ancho en pulgadas en pantalla (del inglés inch).

Como se ha señalado, para las aplicaciones más frecuentes en las tablas, lo más habitual es utilizar px.

Código fuente:
{|width=100% cellpadding="12"
||
{|style="border: 1px  solid red;" bgcolor="lightgreen" width=20%
||Borde con '''1px'''
|}
|-
||
{|style="border: 10px  solid red;" bgcolor="lightgreen" width=20%
||Borde con '''10pt'''
|}
|-
||
{|style="border: 1pc  solid red;" bgcolor="lightgreen" width=20%
||Borde con '''1pc'''
|}
|-
||
{|style="border: 1ex  solid red;" bgcolor="lightgreen" width=20%
||Borde con '''1ex'''
|}
|-
||
{|style="border: 1em  solid red;" bgcolor="lightgreen" width=20%
||Borde con '''1em'''
|}
|-
||
{|style="border: 1mm  solid red;" bgcolor="lightgreen" width=20%
||Borde con '''1mm'''
|}
|-
||
{|style="border: 0.1cm  solid red;" bgcolor="lightgreen" width=20%
||Borde con '''0.1cm'''
|}
|-
||
{|style="border: 0.1in  solid red;" bgcolor="lightgreen" width=20%
||Borde con '''0.1in'''
|}
|}
Apariencia:
Borde con 1px
Borde con 10pt
Borde con 1pc
Borde con 1ex
Borde con 1em
Borde con 1mm
Borde con 0.1cm
Borde con 0.1in

Definición de anchuras y alturas

[editar]

Cuando es necesario especificar una longitud (como por ejemplo: width=200px, para fijar el ancho de una tabla o de una columna) también se pueden utilizar las unidades de medida descritas en el apartado anterior, siendo posible además utilizarse medidas proporcionales, del tipo width=20%.

Debe tenerse en cuenta que:

  • La anchura total en píxeles (px) en pantalla disponible, es un valor que depende de las características de cada dispositivo, por lo que el aspecto de la presentación resultante en la wikipedia queda condicionado por esta circunstancia. Como referencia aproximada, puede señalarse con carácter orientativo que anchuras superiores a 800px pueden provocar que para ver la tabla sea necesario desplazar lateralmente el encuadre de la pantalla.
  • Cuando se especifican medidas relativas (del tipo 85%), se está indicando que el elemento ocupe el 85% del espacio horizontal disponible (es decir, el que no haya sido ya ocupado por otros elementos) en pantalla. Sin embargo, cuando se especifican simultáneamente por este procedimiento el ancho total de una tabla y el de sus columnas, pueden obtenerse resultados inesperados. Curiosamente, cuando los porcentajes de una serie de columnas de una tabla suman más del 100%, los anchos se reparten en proporción al nuevo ancho total (por ejemplo, si se declarasen cinco columnas de una tabla cada una de ellas con un ancho del 40% -lo que suma el 200%- cada una acabaría teniendo el 20% de la anchura total de la tabla).

Las alturas en principio siguen el mismo criterio ya expuesto para los grosores.

Ancho, alto

[editar]

El ancho y el alto de toda la tabla puede ser especificado, así como también el alto de una fila. Para fijar el ancho de una columna se puede especificar el ancho en una celda cualquiera de la columna. Si no se especifica el ancho para todas las columnas, ni el alto de todas las filas, entonces habrá alguna ambigüedad, y el resultado dependerá del navegador.

El código fuente:
{| style="width:400px; height:200px" border="1"
|- 
| abc
| def
| ghi
|- style="height:100px" 
| jkl
| style="width:200px" |mno
| pqr
|-
| stu
| vwx
| yz
|-
|123
|456
|789
|}

Da como resultado:

abc def ghi
jkl mno pqr
stu vwx yz
123 456 789

Alineación del texto (tablas completas y columnas)

[editar]

Se pueden utilizar una serie de instrucciones para alinear el texto de una determinada manera en una tabla entera, o en alguna de sus columnas:

  • Tabla entera: style="text-align:center;"; style="text-align:left;; style="text-align:right; (todas las celdas alineadas al centro, a la izquierda y a la derecha). Si no se indica nada, las celdas normales adoptan la alineación a la izquierda.
  • Una columna: class="col1cen"; class="col1izq"; class="col1der" (la columna 1 alineada al centro, a la izquierda y a la derecha).
class="col9cen"; class="col9izq"; class="col9der" (Los valores de la columna pueden alcanzar hasta el 9)

Por ejemplo:

TABLA TEXTO CENTRADO:

Texto1 Texto2 Texto3
A B C

Código:

<u>TABLA TEXTO CENTRADO:</u>
{|class="wikitable" style="text-align:center;"
||Texto1||Texto2||Texto3
|-
||A||B||C
|-
|}

TABLA TEXTO IZQUIERDA:

Texto1 Texto2 Texto3
A B C

Código:

<u>TABLA TEXTO IZQUIERDA:</u>
{|class="wikitable" style="text-align:left;"
||Texto1||Texto2||Texto3
|-
||A||B||C
|-
|}

TABLA TEXTO DERECHA:

Texto1 Texto2 Texto3
A B C

Código:

<u>TABLA TEXTO DERECHA</u>
{|class="wikitable" style="text-align:right;"
||Texto1||Texto2||Texto3
|-
||A||B||C
|-
|}

También es posible combinar instrucciones para toda la tabla, y especificar la alineación particular de determinadas columnas:

TABLA CON TEXTO ALINEADO POR COLUMNAS:

Tex1 Tex2 Tex3 Tex4 Tex5 Tex6 Tex7 Tex8 Tex9
A B C D E F G H I
a b c d e f g h i

Código:

<u>TABLA CON TEXTO ALINEADO POR COLUMNAS:</u>
{|class="wikitable col8izq col9der" style="text-align:center;"
||Tex1||Tex2||Tex3||Tex4||Tex5||Tex6||Tex7||Tex8||Tex9
|-
||A||B||C||D||E||F||G||H||I
|-
||a||b||c||d||e||f||g||h||i
|}

En este caso, se ha dispuesto primero que todas las columnas de la tabla vayan centradas, y luego se han fijado la columna 8 a la izquierda, y la 9 a la derecha. En la primera fila no se nota el efecto, porque el ancho de las celdas coincide con el de los textos.

NOTA: cuando la tabla presenta celdas unidas (es decir, se usan las órdenes colspan o rowspan), entonces las instrucciones col pueden producir resultados inesperados.

Texto vertical

[editar]

Para disponer verticalmente el texto de una celda, se debe utilizar el estilo style= "writing-mode: vertical-rl; transform: rotate(180deg);". Este estilo alinea el texto vertical de abajo hacia arriba, y ordena las sucesivas líneas de izquierda a derecha.

Si se utiliza style="writing-mode: vertical-lr; transform: rotate(180deg);", las sucesivas líneas se ordenan de derecha hacia izquierda.

El comando style= transform: rotate(225deg); permite orientar el texto en los grados que se desee (en este ejemplo, 225°).

Por ejemplo:

El código fuente:

{|class="wikitable"
|style="writing-mode: vertical-rl; transform: rotate(180deg);" width=60px|'''Esto es un texto vertical 1<br />con un texto vertical 2<br />y con un texto vertical 3'''
|style="writing-mode: vertical-lr; transform: rotate(180deg);" width=60px|Esto es un texto vertical 1<br />con un texto vertical 2<br />y con un texto vertical 3
|style="writing-mode: vertical-rl;" width=60px|'''Esto es un texto vertical 1<br />con un texto vertical 2<br />y con un texto vertical 3'''
|style="writing-mode: vertical-lr;" width=60px|Esto es un texto vertical 1<br />con un texto vertical 2<br />y con un texto vertical 3
|style="writing-mode: vertical-rl; transform: rotate(225deg); text-align:center;" width=180px |Esto es un texto rotado 1<br />con un texto rotado 2<br />y con un texto rotado 3<br />+<br />+
|-
|}

Genera:
Esto es un texto vertical 1
con un texto vertical 2
y con un texto vertical 3
Esto es un texto vertical 1
con un texto vertical 2
y con un texto vertical 3
Esto es un texto vertical 1
con un texto vertical 2
y con un texto vertical 3
Esto es un texto vertical 1
con un texto vertical 2
y con un texto vertical 3
Esto es un texto rotado 1
con un texto rotado 2
y con un texto rotado 3
+
+

Posición

[editar]

Se puede ubicar la tabla en sí, todo el contenido de una fila, y el contenido de una celda, pero no todo el contenido de una tabla con un solo parámetro. Lo habitual es utilizar align para el posicionado horizontal y valign para el vertical.

Sin embargo, cuando se desea que una tabla se alinee por debajo a continuación de UNA FICHA o de una IMAGEN, es necesario utilizar los parámetros class="floatright" o class="floatleft"

Por ejemplo:

El código fuente:
[[Archivo:StarIconBronze.png|right|border|120px]]
{|class="floatright" width="120px" border="1"
||Esta es otra tabla de muestra.
|-
||Otra fila
|}
Genera:
Esta es otra tabla de muestra.
Otra fila

Espaciado

[editar]

También puede especificarse el espaciado entre celdas (cellspacing), el espaciado del contenido de una celda respecto de sus bordes internos (cellpadding) y el margen de una tabla respecto de los elementos que están fuera de ella (margin) o el relleno (padding).

La orden margin admite las expresiones left, right, top y bottom:

style="margin-right:npx;"
style="margin-left:npx;"
style="margin-top:npx;"
style="margin-bottom:npx;"

Los valores npx pueden sustituirse por la expresión auto. Si se cambian ambos, la tabla se centra automáticamente. También pueden utilizarse valores negativos, con lo que se pueden obtener efectos de superposición.

Código

[editar]
{| align="left" style="width:400px; margin-left: 100px; margin-right: 50px; margin-bottom:20px; margin-top:20px;" border="1"
|- 
|<center>Margen 20 arriba<br /><<< Margen 100 izquierda // Margen 50 derecha >>><br />Margen 20 abajo</center>
|} Este es un texto colocado para demostrar cómo se comporta la tabla con márgenes respecto a los contenidos que se sitúan en sus inmediaciones, y con respecto a los bordes de la página en la que se inserta. Por si no ha quedado claro, se vuelve a repetir: Este es un texto colocado para demostrar cómo se comporta la tabla con márgenes respecto a los contenidos que se sitúan en sus inmediaciones, y con respecto a los bordes de la página en la que se inserta.

Apariencia

[editar]
Margen 20 arriba
<<< Margen 100 izquierda // Margen 50 derecha >>>
Margen 20 abajo
Este es un texto colocado para demostrar cómo se comporta la tabla con márgenes respecto a los contenidos que se sitúan en sus inmediaciones, y con respecto a los bordes de la página en la que se inserta. Por si no ha quedado claro, se vuelve a repetir: Este es un texto colocado para demostrar cómo se comporta la tabla con márgenes respecto a los contenidos que se sitúan en sus inmediaciones, y con respecto a los bordes de la página en la que se inserta.

«Ejemplo mezcla»

[editar]

Aquí hay un ejemplo más avanzado que muestra más opciones disponibles para «maquillar» tablas. Puede jugar con estos ajustes en su propia tabla para ver los efectos que tienen. No todas estas técnicas pueden ser apropiadas en todos los casos; ya que adicionar fondos coloreados, por ejemplo, puede no ser una buena idea. Trate de mantener el “maquillaje” en sus tablas relativamente simple –recuerde , otras personas estarán editando también el artículo. Este ejemplo le da una idea de lo que es posible.

Código fuente

[editar]
{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''Una tabla ejemplo'''
|-
! style="background:#efefef;" | Primer encabezado
! colspan="2" style="background:#ffdead;" | Segundo encabezado
|-
| arriba a la izquierda
| &nbsp;
| rowspan="2" style="border-bottom:3px solid grey;" valign="top" |
lado derecho
|-
| style="border-bottom:3px solid grey;" | abajo a la izquierda
| style="border-bottom:3px solid grey;" | abajo en el medio
|-
| colspan="3" align="center" |
{| border="0"
|+''Una tabla en otra tabla''
|-
| align="center" width="150px" | [[Archivo:Wikipedia-logo-es.png]]
| align="center" width="150px" | [[Archivo:Wikipedia-logo-es.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px
          solid red; border-bottom:2px solid red; border-left:1px solid red;" |
Dos logos de Wikipedia
|}
|}

Apariencia

[editar]
Una tabla ejemplo
Primer encabezado Segundo encabezado
arriba a la izquierda  

lado derecho

abajo a la izquierda abajo en el medio
Una tabla en otra tabla

Dos logos de Wikipedia

Tipos de tablas

[editar]

Ordenables

[editar]
Hay más información en Help:Sorting (en inglés)

Algunas tablas se pueden hacer ordenables añadiendo class="sortable" (información más detallada en Help:Sorting (en inglés)). A pesar de ser muy útil, es importante mantener las posibilidades y limitaciones de la presentación presentes a la hora de diseñar una tabla. Por ejemplo:

  • No es bueno dividir una tabla en secciones con subheaders (subcabeceras) que abarquen varias filas. En vez de ello, una columna extra se puede crear para mostrar el contenido de esas cabeceras en cada columna, siendo más corto el método.
  • No es bueno tener elementos que abarquen toda la columna. Al contrario, es mejor repetir el contenido en cada columna, de manera más corta.
  • En una columna de números, no se deben colocar textos como "ca." delante de una cifra, pues la instrucción sort la considerará como si fuese cero. Tampoco se debe colocar texto después de un número, ni un rango de números (no afecta la posición de clasificación para el modo de clasificación numérica, y en el caso de un rango, el primer número determina la posición; pero si es el elemento de la parte superior, posiblemente después de su clasificación o de otra columna, induce la clasificación alfabética). En su lugar, poner estos textos en una columna aparte. Por otra parte, para mayor flexibilidad, claves de ordenación (sortkeys) ocultas pueden ser utilizadas en cada celda con el modo de ordenación alfabética, con la forma:
{{co|clave ordenación}}
  • Para forzar a un criterio de ordenación numérica, se puede añadir a la columna que se desee la instrucción:
data-sort-type="number" scope=col

Una forma de contenido muy abreviada se puede poner en la leyenda fuera de la tabla.

El código fuente:
{| class="wikitable sortable"
|+ Tabla ordenable
|-
! scope="col" | Alfabético
! scope="col" | Numérico
! scope="col" | Fecha
! scope="col" class="unsortable" | Desordenada
|-
| C || 2 || 2011-11-1 || Esta
|-
| d || 15 || 2014-13-01 || columna
|-
| e || 12 || 1959-07-2 || no se
|-
| a || 3 || 492-11-02 || puede
|-
| b || 7 || 1601-05-12 || ordenar
|}
Aparecerá así:

Tabla ordenable
Alfabético Numérico Fecha Desordenada
C 2 2011-11-1 Esta
d 15 2014-13-01 columna
e 12 1959-07-2 no se
a 3 492-11-02 puede
b 7 1601-05-12 ordenar

Colapsables

[editar]
Hay más información en wikimedia:Help:Collapsing y en wikipedia:Help:Collapsing (en inglés)

Se entiende por tablas colapsables aquellas cuyo contenido se puede mostrar u ocultar alternativamente pulsando el enlace que aparece en su cabecera, que es la única parte que en cualquier caso permanece siempre visible. Para que una tabla sea colapsable basta agregar la clase mw-collapsible. Para que aparezca el enlace [mostrar] / [ocultar], la primera fila de la tabla debe ser una fila de encabezado, es decir, una de las celdas de la primera fila debe declararse con un signo de exclamación. El uso de la clase wikitable en el siguiente ejemplo es únicamente para mostrar su apariencia; y no sería imprescindible para poder usar la función mw-collapsible. Añadiendo el comando mw-collapsed, la tabla aparece contraída (si se desea, el ancho de la tabla una vez contraída se puede controlar con el parámetro style="min-width:100%;"):

Código Resultado
{| class="wikitable mw-collapsible mw-collapsed"
! Tabla colapsable simple colapsada por defecto
|-
| ''Esto es un ejemplo de tabla colapsable''
|}
Tabla colapsable simple colapsada por defecto
Esto es un ejemplo de tabla colapsable

Utilizando la sintaxis anterior, las tablas plegables se utilizan a menudo para mostrar solo una introducción o resumen de un párrafo muy largo o de una sección de contenido, al tiempo que se oculta la mayoría del contenido de su visión inmediata. El mensaje resumido se sitúa en la celda del encabezado y el contenido se coloca en el cuerpo de la celda. El contenido es accesible haciendo clic en el botón 'Extender'. La función también está disponible para tablas más grandes y más complicadas.

Código Resultado
{| class=" wikitable mw-collapsible"
|Celda normal en la fila de encabezamiento
! colspan="2"| Celda de cabecera abarcando dos columnas
|-
| colspan="2" | ''Esto es un ejemplo de tabla colapsable''
| Otra celda separada
|}
Celda normal en la fila de encabezamiento Celda de cabecera abarcando dos columnas
Esto es un ejemplo de tabla colapsable Otra celda separada

En ventana ("scroll")

[editar]

Este tipo de tabla dispone de una ventana cuyo tamaño se puede fijar, con unos cursores laterales deslizantes que permiten visualizar el contenido de la tabla desplazándose verticalmente y/o horizontalmente por la ventana. Adicionalmente, también se pueden hacer colapsables.

Código Resultado
Ventana deslizante vertical:
<div style="float:center; clear:right; height: 150px; width: 290px; overflow: auto; background-color: #FFFAF2; font-size: 100%; margin: 12px; border-style: solid; border-width: thin;">
{| class="wikitable collapsible" align="center" style="margin: 1em; margin-top: 0;"
! colspan="2" style="white-space: nowrap;" | Número // Nombre
|-
| Número 1 || Uno 
|-
| Número 2 || Dos 
|-
| Número 3 || Tres 
|-
| Número 4 || Cuatro 
|-
| Número 5 || Cinco 
|-
| Número 6 || Seis 
|-
| Número 7 || Siete 
|-
| Número 8 || Ocho 
|-
| Número 9 || Nueve  
|-
| Número 10 || Diez 
|-
| colspan="2" style="font-size: smaller;" |
'''NÚMEROS Y SUS EXPRESIONES'''
|}
</div>

Ventana deslizante vertical:

Número // Nombre
Número 1 Uno
Número 2 Dos
Número 3 Tres
Número 4 Cuatro
Número 5 Cinco
Número 6 Seis
Número 7 Siete
Número 8 Ocho
Número 9 Nueve
Número 10 Diez

NÚMEROS Y SUS EXPRESIONES

En el caso de que se desee que el interior de la ventana deslice horizontalmente, se debe utilizar el código siguiente:

Código
Ventana deslizante horizontal:

<div style="overflow:auto; overflow-y:hidden; overflow-x:auto; white-space: nowrap; width:900px; padding: 0;">
{|class="wikitable"
|| Esto es una tabla con una anchura ciertamente inagotable 1
|| Esto es una tabla con una anchura ciertamente inagotable 2
|| Esto es una tabla con una anchura ciertamente inagotable 3
|| Esto es una tabla con una anchura ciertamente inagotable 4
|}
</div>

Resultado
Ventana deslizante horizontal:
Esto es una tabla con una anchura ciertamente inagotable 1 Esto es una tabla con una anchura ciertamente inagotable 2 Esto es una tabla con una anchura ciertamente inagotable 3 Esto es una tabla con una anchura ciertamente inagotable 4

NOTA: si la orden <div> se encuentra dentro de una celda de una tabla, es necesario fijar el ancho de la ventana con una declaración del tipo width: 800px. En caso contrario, funcionan correctamente las declaraciones del tipo width: 100%, como en el ejemplo siguiente:

Código

<div style="width: 100%; overflow:auto; overflow-y:hidden; overflow-x:auto; white-space: nowrap;">
{|class="wikitable"
|| Esto es una tabla con una anchura ciertamente inagotable 1
|| Esto es una tabla con una anchura ciertamente inagotable 2
|| Esto es una tabla con una anchura ciertamente inagotable 3
|| Esto es una tabla con una anchura ciertamente inagotable 4
|}</div>
Resultado
Esto es una tabla con una anchura ciertamente inagotable 1 Esto es una tabla con una anchura ciertamente inagotable 2 Esto es una tabla con una anchura ciertamente inagotable 3 Esto es una tabla con una anchura ciertamente inagotable 4

A rayas

[editar]

Se puede agregar la clase striped para que la tabla muestre las líneas alternativamente de distinto color. Esto es útil para ayudar a visualizar las líneas cuando la tabla es ancha y no tiene bordes y especialmente en tablas ordenables, pues no se descolocan los colores programados al ordenar las columnas.

Ejemplo de tabla con colores usando class="wikitable sortable" y marcando las filas pares con bgcolor="yellow":

Puesto Año
1 2008
2 2009
3 2000
4 2007
5 1988
6 1957

Mismo ejemplo con class="wikitable sortable striped" y prescindiendo de los colores personalizados:

Puesto Año
1 2008
2 2009
3 2000
4 2007
5 1988
6 1957

Mismo ejemplo con class="wikitable sortable striped" y personalizando los colores en toda la tabla con style="background-color:yellow;":

Puesto Año
1 2008
2 2009
3 2000
4 2007
5 1988
6 1957

Fusionar celdas

[editar]

Fusionar celdas de la misma columna

[editar]

Para fusionar filas se utiliza |rowspan=número de celdas a fusionar|:

El código fuente:
{| align=right border=1
| Fila 1, columna 1 
|rowspan=2| Filas 1 y 2, columna 2
| Fila 1, columna 3
|- 
| Fila 2, columna 1
| Fila 2, columna 3
|}
Produce la tabla:


Fila 1, columna 1 Filas 1 y 2, columna 2 Fila 1, columna 3
Fila 2, columna 1 Fila 2, columna 3

No se debe olvidar que esas celdas ya estarán fusionadas, por lo que quedarán obviadas en el código. En el ejemplo se puede ver que se ha obviado introducir el contenido de la celda de la columna 2, fila 2.

Fusionar celdas de la misma fila

[editar]

Para fusionar columnas se utiliza |colspan=número de celdas a fusionar|:

El código fuente:
{| align=right border=1
|colspan=2| Fila 1, columnas 1 y 2 
|- 
| Fila 2, columna 1 
| Fila 2, columna 2
|-
| Fila 3, columna 1 
| Fila 3, columna 2 
|}
Da como resultado:



Fila 1, columnas 1 y 2
Fila 2, columna 1 Fila 2, columna 2
Fila 3, columna 1 Fila 3, columna 2

Como en el caso anterior, no debe olvidarse que esas celdas ya estarán fusionadas, por lo que quedarán obviadas en el código. En el ejemplo puede verse que se ha obviado introducir el contenido de la celda de la Fila 1, columna 2.

Tabla anidada

[editar]
El código fuente:
{| border=1
| &alpha;
|
{| bgcolor="#ABCDEF" border="2"
|tabla
|-
|anidada
|}
|la tabla original de nuevo
|}
Produce la tabla anidada:

α
tabla
anidada
la tabla original de nuevo

No debe olvidarse que las tablas anidadas deben comenzar obligatoriamente en una nueva línea.

Otras sintaxis de tablas

[editar]

Otros tipos de sintaxis de tablas que soporta MediaWiki son:

  • XHTML
  • HTML y sintaxis wiki <td>

Los tres son compatibles con MediaWiki y crean (actualmente) una visualización HTML válida, pero la sintaxis con barras verticales es la más simple, excepto tal vez para las personas que ya están familiarizadas con HTML. También, HTML y sintaxis wiki <td> no necesariamente permanecerán soportadas por los navegadores en el futuro por venir, especialmente por las computadoras de mano (handheld) con posibilidad de acceder a internet.

Véase también HTML element#Tables (en Wikipedia en inglés).

Comparación

[editar]
Comparación de sintaxis de tablas
 XHTML HTML & Wiki-td Wiki-pipe
Tabla <table></table> <table></table>
{| parámetros 
|}
Leyenda <caption></caption> <caption></caption>
|+ leyenda
Fila <tr></tr> <tr>
|- parámetros 
Celda de datos

<td>celda1</td>
<td>celda2</td>

<td>celda1
<td>celda2

| celda1
| celda2
Celda de datos <td>celda1</td> <td>celda2</td> <td>celda3</td> <td>celda1 <td>celda2 <td>celda3
|celda1||celda2||celda3
Celda encabezado <th></th> <th>
! encabezado
Tabla ejemplo
1 2
3 4
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
</table>
{| 
| 1 || 2
|- 
| 3 || 4
|}
Tabla ejemplo
1 2
3 4
5 6
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
   <tr>
      <td> 5 <td> 6
</table>
{| 
| 1 || 2 
|- 
| 3 || 4 
|- 
| 5 || 6 
|}
Ventajas

Puede ser previsualizado/depurado con cualquier editor XHTML


Puede dársele un formato para mejor lectura


Bien conocido

Puede ser previsualizado/depurado con cualquier editor HTML


Puede dársele un formato para mejor lectura


Bien conocido


Ocupa menos espacio que XHTML

Fácil de escribir


Fácil de leer


Ocupa menos espacio

Desventajas

Tedioso


Ocupa mucho espacio


Difícil de leer rápidamente

Confusa, especialmente para gente con poca experiencia en HTML


Formato pobre


Pobremente desarrollado


Generalmente tiene aspecto raro


Puede no tener soporte de navegadores en el futuro

Sintaxis no familiar


Estructura rígida


No se pueden colocar sangrías


El texto (como en etiquetas HTML) puede ser más fácil de leer para algunas personas que series de barras verticales, signos de suma, de exclamación, etc.

 XHTML HTML & Wiki-td Wiki-pipe

Sintaxis de barras verticales en términos de presentación HTML

[editar]

La sintaxis de barras verticales, desarrollada por Magnus Manske, substituye barras verticales (|) por HTML. Las barras verticales deben estar al comienzo de una nueva línea, excepto cuando separan parámetros de contenido o cuando se usan dos barras verticales seguidas || para separar celdas en una misma línea. Los parámetros son opcionales.

Tablas

[editar]

Una tabla está definida por {| ''parámetros'' |} que genera el código HTML "<table parámetros>"</table>

Cuidado: Debe incluir un espacio entre {| y los parámetros, o el primer parámetro será ignorado.

Filas

[editar]

En cada tabla, la etiqueta HTML <tr> será generada automáticamente para la primera fila. Para comenzar una nueva fila, use

|-

que genera otra etiqueta <tr>

Se pueden añadir los parámetros de la siguiente forma:

|- parámetros

que genera <tr parámetros>

Nota:

  • La etiqueta <tr> se abre automáticamente con la primera <td> equivalente.
  • Las etiquetas <tr> se cierran automáticamente con las <tr> y </table> equivalentes.

Celdas

[editar]

Las celdas son generadas de las siguientes formas, así:

|celda1
|celda2
|celda3

o bien así:

|celda1||celda2||celda3

ambas generan el código "<td>celda1</td><td>celda2</td><td>celda3</td>". La "||" equivale a escribir una nueva línea + "|".

Se pueden usar parámetros en las celdas de la siguiente forma:

|parámetros|celda1||parámetros|celda2||parámetros|celda3

que dará como resultado

<td parámetros>celda1</td>
<td parámetros>celda2</td>
<td parámetros>celda3</td>

Encabezados

[editar]

Funcionan de la misma forma que TD, excepto que se debe usar "!" en lugar de "|" para abrirlas. También se puede usar "!!" en vez de "||". Sin embargo para los parámetros se sigue usando "|". Ejemplo:

!parámetros|celda1

Títulos

[editar]

La etiqueta <tdcaption> se crea con

|+ Título

que genera el código HTML "<caption>Título</caption>".

También puede usar parámetros:

|+ parámetros|Título

que generará "<caption parámetros>Título</caption>".

Uso en el interior de plantillas

[editar]

Las plantillas también utilizan el carácter de barra vertical para su funcionamiento, por lo que las barras verticales de una tabla situada en el interior de una plantilla pueden interferir con las del código de la propia plantilla. Para evitarlo, se sustituyen las barras verticales de la tabla por {{!}}. Por ejemplo, la siguiente tabla:

{| class="wikitable" border="1"
|+ Título
|-
| Celda 1 || Celda 2
|}

Puede ser sustuituida por el siguiente código, manteniendo la misma funcionalidad:

{{{!}} class="wikitable" border="1"
{{!}}+ Título
{{!}}-
{{!}} Celda 1 {{!}}{{!}} Celda 2
{{!}}}

Este código puede ser introducido en una plantilla, como en el siguiente ejemplo:

{{Plegable
|título    = Caja plegable de ejemplo
|plegada   = no
|contenido =

{{{!}} class="wikitable" border="1"
{{!}}+ Título
{{!}}-
{{!}} Celda 1 {{!}}{{!}} Celda 2
{{!}}}

}}

Dando el siguiente resultado:

Texto próximo a una tabla

[editar]

(Para ver los efectos debes aumentar o disminuir el tamaño de la fuente del navegador; también puedes cambiar el ancho de la ventana del navegador.)

Se puede usar align="right" para que el texto que sigue a la tabla aparezca a la izquierda de la misma:

El código fuente:
{| border="1" cellpadding="2" align="right"
|+Tabla de multiplicar 5*3
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|} 
Aquí comienza el texto inmediatamente después de la tabla de multiplicar 5*3.
<br clear="all" />
Y sigo escribiendo más cosas después de la tabla relativas a las propias tablas de multiplicar números enteros...
Da como resultado:


Tabla de multiplicar 5*3
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

Aquí comienza el texto inmediatamente después de la tabla de multiplicar 5*3.
Y sigo escribiendo más cosas después de la tabla relativas a las propias tablas de multiplicar números enteros...

Sin embargo, no se puede colocar texto preformateado porque este puede solaparse a la tabla.
Para prevenir esto usa <br style="clear:both;">:

El código fuente:
{| border="1" cellpadding="2" align="right"
|+Tabla de multiplicar 4*3
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|} 

Aquí comienza el texto inmediatamente después de la tabla de multiplicar 4*3…  ahora viene el salto especificado con el comando BR: <br style="clear:both;">
Y sigo escribiendo más cosas después de la tabla relativas a las propias tablas de multiplicar números enteros...
Da como resultado:



Tabla de multiplicar 4*3
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12

Aquí comienza el texto inmediatamente después de la tabla de multiplicar 4*3… ahora viene el salto especificado con el comando BR:
Y sigo escribiendo más cosas después de la tabla relativas a las propias tablas de multiplicar números enteros...

El texto preformateado empezaría solo después de que la tabla termine.

Se puede usar align="left", y la tabla aparecerá a la izquierda y el texto que sigue a la misma a la derecha (pero posiblemente demasiado cerca):

El código fuente:
{| border="1" cellpadding="2" align=left
|+Tabla de multiplicar 2*3
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
|} 
Aquí comienza el texto inmediatamente después de la tabla de multiplicar 2*3 
<br clear="all" />
Y sigo escribiendo a continuación...
Da como resultado:

Tabla de multiplicar 2*3
× 1 2 3
1 1 2 3
2 2 4 6
Aquí comienza el texto inmediatamente después de la tabla de multiplicar 2*3


Y sigo escribiendo a continuación...

Espacio alrededor de una tabla, imagen o texto

[editar]

Para crear espacio alrededor de una tabla, imagen o texto, crea una tabla de 1×1 alrededor de estos elementos con «cellpadding»:

El código fuente:
{| cellpadding="50" align="left"
|-
|
{| border="1" cellpadding="2"
|+Tabla de multiplicar
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
|} 
|}
{| cellpadding="50" align="right"
|[[Archivo:Gelderland-Position.png]]
|}
{| cellpadding="50" align="left" border="5"
|Texto en caja
|}
<br clear="all" />
Produce:
Tabla de multiplicar
× 1 2 3
1 1 2 3
2 2 4 6
Texto en caja


Ajuste de ancho y altura (columnas y filas)

[editar]

Ajuste del ancho de las columnas

[editar]

Si quieres forzar el ancho de columna de acuerdo a tus necesidades en vez de aceptar el ancho del mayor elemento en una celda de una columna, sigue este ejemplo. Nótese que el espacio alrededor del texto está impuesto. La instrucción utilizada es width=npx (que fija el ancho en npx; también admite el formato con el valor entrecomillado en la forma width="n"); pudiendo usarse también el formato width=p% (donde p es el porcentaje del ancho de la tabla que se desea utilizar). Esta orden (en sus dos formatos) se pueden aplicar tanto a columnas individuales como a tablas completas (por ejemplo, fijando el ancho total de la tabla en su encabezamiento en npx, y repartiendo las columnas en p%).

Código:
{| border="1" cellpadding="2"
!width="50"|Nombre
!width=150px|Efecto
!width="250"|En que juego se encuentra
|-
|Pokeball
|Pokeball normal
|Todas las versiones
|-
|Great Ball
|Mejor que un Pokeball
|Todas las versiones
|}

Resultado:

Nombre Efecto En que juego se encuentra
Pokeball Pokeball normal Todas las versiones
Great Ball Mejor que un Pokeball Todas las versiones

Ajuste de la altura de las filas

[editar]

En el siguiente ejemplo se muestra el procedimiento para forzar la altura de una fila (o de una tabla completa) en vez de aceptar por defecto la altura del mayor elemento de las celdas que la componen. En este caso, se ha fijado la altura total de la tabla en 300px con el comando que figura en la cabecera style="height: 300px;", y después se reparte proporcionalmente entre las filas mediante las órdenes height=p% (también se podrían utilizar con los formatos height=npx y height="n").

Código:
{| border="1" cellpadding="2" style="height: 300px;"
!width="50" height=30%|Nombre
!width=150px|Efecto
!width="250"| En que juego se encuentra
|-
|height=10%|Pokeball
|Pokeball normal
|Todas las versiones
|-
|height=40%|Great Ball
|Mejor que un Pokeball
|Todas las versiones
|}

Resultado:

Nombre Efecto En que juego se encuentra
Pokeball Pokeball normal Todas las versiones
Great Ball Mejor que un Pokeball Todas las versiones

Ajuste de parámetros

[editar]

Al comienzo de una celda adiciona su parámetro seguido de una sola barra vertical. Por ejemplo width=300px| esto determinará una celda con un ancho de 300 píxeles. Para establecer más de un parámetro deja un espacio entre cada uno.

El código fuente:
{|
|-
| bgcolor="red"|celda1 || width="300px" bgcolor="blue"|celda2 || bgcolor="green"|celda3
|}
Se verá así en su navegador:



celda1 celda2 celda3

Alineación del separador decimal

[editar]

Un método para obtener columnas de números alineadas en el separador decimal es como sigue:

El código fuente:
{| cellpadding=0 cellspacing=0 class="col1der col3izq"
| 432 || . || 1
|-
| 43 || . || 21
|-
| 4 || . || 321
|}
Da como resultado:



432 . 1
43 . 21
4 . 321

En casos simples se puede regular manualmente el encolumnado de la tabla, y simplemente comenzar la línea con un espacio y poniendo espacios en la posición de los números faltantes:

432.1
 43.21
  4.321

Clases de estilo

[editar]

Existen clases CSS para hacer tablas con estilo más fácilmente. En vez de recordar parámetros de tablas puede incluir una clase de estilo apropiada después de {|. Esta ayuda conserva el formato de tablas consistente y puede permitir que un simple cambio en la plantilla repare un problema o realce la apariencia de todas las tablas que la usen.

Por ejemplo:
Tabla de multiplicar
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15
Se convierte en:
Tabla de multiplicar
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

simplemente reemplazando la sección border="1" cellpadding="2" por class="wikitable" border="1".

Galería

[editar]

Se puede formar una tabla con una etiqueta de galería, pero si una entrada de texto contiene un enlace, la entrada entera es ignorada. En este ejemplo, no aparece la imagen de la provincia de Cádiz sombreada, dado que la línea de código en la que se hace referencia a la imagen correspondiente también incluye un enlace al artículo "Zahara de los Atunes". Por ejemplo, con el código siguiente:

<gallery>
Jaén respecto Andalucía.png
Córdoba respecto Andalucía.png
Sevilla respecto Andalucía.png
Huelva respecto Andalucía.png
Cádiz respecto Andalucía.png ([[Zahara de los Atunes]])
Málaga respecto Andalucía.png
Granada respecto Andalucía.png
Almería respecto Andalucía.png
</gallery>

se obtiene:

Se comprueba que la imagen de Cádiz simplemente no aparece, pero no se muestra ningún mensaje de error.

Diagramas de barras horizontales

[editar]

Para generar diagramas de barras, se pueden utilizar celdas conteniendo comandos del tipo:

<hr style="width:400px;height:32px;background:orange"/>

donde width: indica el ancho de la barra en píxeles, height: su altura también en píxeles, y background: el color de la barra.

Por ejemplo, el código:

{|class="wikitable" 
|+ style="color:white;background:grey;"|'''Producción Mundial anual de Mercurio:'''
|-
!n.º!!País!!Producción!!(Tm)
|-
||1
||{{bandera|PRC}} [[República Popular China|China]]||<hr style="width:400px;height:32px;background:orange"/>||align="center"|1600
|-
||2||{{bandera|KGZ}} [[Kirguistán]]||<hr style="width:100px;height:8px;background:orange"/>||align="center"|100
|-
||3||{{bandera|CHI}} [[Chile]]||<hr style="width:50px;height:8px;background:orange"/>||align="center"|50
|-
||4||{{bandera|RUS}} [[Rusia]]||<hr style="width:50px;height:8px;background:orange"/>||align="center"|50
|-
||5||{{bandera|PER}} [[Perú]]||<hr style="width:45px;height:8px;background:orange"/>||align="center"|45
|-
||6||{{bandera|TJK}} [[Tayikistán]]||<hr style="width:45px;height:8px;background:orange"/>||align="center"|45
|-
||7||{{bandera|MAR}} [[Marruecos]]||<hr style="width:32px;height:8px;background:orange"/>||align="center"|32
|-
|colspan=4|''(Año 2013. Fuente:[http://www.indexmundi.com/minerals/?product=mercury&graph=production IndexMundi])''
|-
|}

produce el resultado siguiente:

Producción Mundial anual de Mercurio:
n.º País Producción (Tm)
1 Bandera de la República Popular China China
1600
2 Bandera de Kirguistán Kirguistán
100
3 Bandera de Chile Chile
50
4 Bandera de Rusia Rusia
50
5 Bandera de Perú Perú
45
6 Bandera de Tayikistán Tayikistán
45
7 Bandera de Marruecos Marruecos
32
(Año 2013. Fuente:IndexMundi)

En este caso, se ha mantenido la proporcionalidad entre las cifras de producción y la superficie de las barras, jugando con su longitud y su altura. En el caso de "China", cuya producción es 1600 tm, la barra mide 400px de longitud, pero su anchura es 32px, 4 veces más que la del resto de barras, que miden 8px de altura.

Véase también

[editar]

Enlaces externos

[editar]