Loading AI tools
página de proyecto de Wikimedia De Wikipedia, la enciclopedia libre
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.
{| parámetros opcionales para la tabla
y finaliza con la línea |}
.|+ leyenda
después de {|
.|- parámetros opcionales para la fila
.| valor
, pero opcionalmente puede parametrizarse con | parámetros de celda | valor
.!
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.!
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 (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.
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=").
Fila 1, columna 1 | Fila 1, columna 2 |
Fila 2, columna 1 | Fila 2, columna 2 |
{|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 |}
Fila 1, columna 1 | Fila 1, columna 2 |
Fila 2, columna 1 | Fila 2, columna 2 |
{|class="wikitable col1cen col2cen center" style="width:300px" |- ||Fila 1, columna 1 ||Fila 1, columna 2 |- ||Fila 2, columna 1 ||Fila 2, columna 2 |}
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 |}
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 |}
|
|
|
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:
|
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 | Columna 2 centrada <!-- 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 |} | ||||||||||||
|
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").
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:
|
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:
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 |
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:
|
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:
|
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:
|
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:
|
El comando font-weight: bold;
permite que el texto de color blanco aparezca en negrita.
Los nombres de los colores que pueden emplearse en una tabla son:
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 |
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 |
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 |
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:
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:
|
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:
Las alturas en principio siguen el mismo criterio ya expuesto para los grosores.
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:
| ||||||||||||
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:
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.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:
Código: <u>TABLA TEXTO CENTRADO:</u> {|class="wikitable" style="text-align:center;" ||Texto1||Texto2||Texto3 |- ||A||B||C |- |} |
TABLA TEXTO IZQUIERDA:
Código: <u>TABLA TEXTO IZQUIERDA:</u> {|class="wikitable" style="text-align:left;" ||Texto1||Texto2||Texto3 |- ||A||B||C |- |} |
TABLA TEXTO DERECHA:
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:
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.
colspan
o rowspan
), entonces las instrucciones col pueden producir resultados inesperados.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:
|
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:
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.
{| 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. |
|
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.
{| 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
|}
|}
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:
{{co|clave ordenació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í:
|
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''
|} |
|
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
|} |
|
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:
|
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: |
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:
<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> |
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
|
Mismo ejemplo con
|
Mismo ejemplo con
|
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:
|
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.
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:
|
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.
El código fuente:
{| border=1 | α | {| bgcolor="#ABCDEF" border="2" |tabla |- |anidada |} |la tabla original de nuevo |} |
Produce la tabla anidada:
|
No debe olvidarse que las tablas anidadas deben comenzar obligatoriamente en una nueva línea.
Otros tipos de sintaxis de tablas que soporta MediaWiki son:
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).
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>celda1 |
| 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 |
| ||||||||
<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 |
| ||||||||
<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 |
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.
Una tabla está definida por {| ''parámetros'' |} que genera el código HTML "<table parámetros>"</table>
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:
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>
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
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>".
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:
(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:
Aquí comienza el texto inmediatamente después de la tabla de multiplicar 5*3.
|
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:
Aquí comienza el texto inmediatamente después de la tabla de multiplicar 4*3… ahora viene el salto especificado con el comando BR: |
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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
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:
|
Se convierte en:
|
simplemente reemplazando la sección border="1" cellpadding="2"
por class="wikitable" border="1"
.
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:
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:
n.º | País | Producción | (Tm) |
---|---|---|---|
1 | ![]() | 1600 | |
2 | ![]() | 100 | |
3 | ![]() | 50 | |
4 | ![]() | 50 | |
5 | ![]() | 45 | |
6 | ![]() | 45 | |
7 | ![]() | 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.