Ayuda:Tablas

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 ^(1) (2) Cómo empezarlo Cómo redactarlo mejor Cómo añadirle imágenes ^(3) Cómo referenciarlo^(4) Cómo categorizarlo No lo firmes ^(5) (6)
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 TeX · LaTeX
Más ayuda
Preguntas idiomáticas Transliteración Dónde colaborar Contenidos de ayuda
Recursos
Recursos libres Imágenes de dominio púbilico Más recursos y herramientas Ejemplos de peticiones de permiso

Atajo A:TABA:TAB

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

• 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 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; 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")

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 grey;" cellpadding="0" cellspacing="0" |- |style="border: 1px solid grey;" cellpadding="0" cellspacing="0" align="center"|Fila 1, columna 1 |style="border: 1px solid grey;" cellpadding="0" cellspacing="0" align="center"|Fila 1, columna 2 |- |style="border: 1px solid grey;" cellpadding="0" cellspacing="0" align="center"|Fila 2, columna 1 |style="border: 1px solid grey;" cellpadding="0" cellspacing="0" 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, aún 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 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

Ejemplo simple

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

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 regula si en la tabla se han unido varias celdas (mediante "colspan" o "rowspan")

Ejemplo de tabla dinámica

Tabla dinámica sencilla

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

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

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 |- ! × !! 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

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 | 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, aún 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

Para más colores, véanse Colores web y Anexo:Colores.

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

Nombres de los colores

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

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}}

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

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

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

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)

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

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);"|'''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);"|Esto es un texto vertical 1<br />con un texto vertical 2<br />y con un texto vertical 3 |style="writing-mode: vertical-rl;"|'''Esto es un texto vertical 1<br />con un texto vertical 2<br />y con un texto vertical 3''' |style="writing-mode: vertical-lr;"|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);" width=180px|Esto es un texto rotado 1<br />con un texto rotado 2<br />y con un texto rotado 3 |- |} |}

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

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

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

{| 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

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»

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

{| 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 |   | 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

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

Ordenables

Véase también: Plantilla:Orden

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

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:

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")

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

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

Fusionar celdas de la misma columna

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

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

El código fuente: {| border=1 | α | {| 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

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

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

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

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

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

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

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

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

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

(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

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)

Ajuste del ancho de las columnas

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

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

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

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

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

Como un subproducto de la característica de galería de imágenes, una tabla puede ser hecha con una etiqueta de galería; si una entrada de texto contiene un enlace, la entrada entera es ignorada.

<gallery> Drenthe Flevoland Friesland Gelderland Groningen Limburg North Brabant (capital: [[Den Bosch]]) North Holland Overijssel South Holland Utrecht Zeeland </gallery> 

da:

• Drenthe
• Flevoland
• Friesland
• Gelderland
• Groningen
• Limburg
• North Holland
• Overijssel
• South Holland
• Utrecht
• Zeeland

Diagramas de barras horizontales

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	China		1600
2	Kirguistán		100
3	Chile		50
4	Rusia		50
5	Perú		45
6	Tayikistán		45
7	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

• Ayuda:Recursos para Wikipedia, conversión de tablas a formato Mediawiki.
• Introducción a las tablas con VisualEditor (en inglés)

Enlaces externos

• csv2wp - converts comma-separated values (CSV) format to pipe syntax. You may use this to import tables from Excel etc. (more information) (en inglés)
• pywikipediabot (puede convertir tablas HTML al formato wiki) (en inglés)
• TABLEIZER!, desde hoja de cálculo