51 664 bytes añadidos
, hace 11 años
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 "<tt>{|</tt> ''parámetros opcionales para la tabla'' " y finaliza con la línea "<tt>|}</tt>".
*Una '''leyenda''' opcional se incluye con la línea "<tt>|+</tt> ''leyenda'' " después de "<tt>{|</tt>".
*El código de una '''fila''' consiste en una línea "<tt>|-</tt> ''parámetros opcionales para la tabla'' " y los códigos para las celdas de la fila, comenzados por una línea "|".
* '''Datos de tabla''' son los códigos para las celdas; el código de la celda está formado por "| ''valor'' " o "| ''parámetros de celda'' | ''valor'' ".
*Una fila de '''títulos de columna''' se identifica usando "!" en lugar de "|", excepto para la separación entre un parámetro de celda y un valor; la diferencia con una fila normal depende del navegador, los títulos de columna están frecuentemente presentados en negritas.
*La primera celda de la fila es identificada como '''fila de títulos''' si comienza la línea con "!" en lugar de "|", y comienzan las subsecuentes celdas de datos en una nueva línea.
Los parámetros de tabla y de celdas son los mismos como en HTML, ver [http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE] (página en inglés) y [[w:HTML element#Tables|HTML element#Tables]] (wiki en inglés). Sin embargo los elementos <tt>thead</tt>, <tt>tbody</tt>, <tt>tfoot</tt>, <tt>colgroup</tt> y <tt>col</tt> actualmente no son [[Html#Permitted HTML|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; vea por ejemplo [[Ajedrez#El tablero de ajedrez]]. Una "imagen" en forma de una tabla es mucho más conveniente para editar una imagen subida.
Cada fila debe tener el mismo número de celdas que las otras filas, así la cantidad de columnas en la tabla continúa siendo consistente (a menos que haya celdas que abarquen varias columnas o filas, vea colspan y rowspan en ejemplo mezcla más abajo). Para celdas vacías, use el espacio “non-breaking” <tt>&nbsp;</tt> como contenido para asegurar que las celdas sean mostradas.
== Ejemplos ==
=== Ejemplo simple ===
<pre>
{|
| Celda 1, Fila 1
| Celda 2, Fila 1
|-
| Celda 1, Fila 2
| Celda 2, Fila 2
|}
</pre>
y
<pre>
{|
| Celda 1, Fila 1 || Celda 2, Fila 1
|-
| Celda 1, Fila 2 || Celda 2, Fila 2
|}
</pre>
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 “<tt>col'''n'''izq</tt>”, “<tt>col'''n'''der</tt>” y “<tt>col'''n'''cen</tt>”, donde <tt>'''n'''</tt> se reemplaza por el número de columna. Para anular esta preferencia en una celda particular, se puede usar <tt>style="text-align:..."</tt> en la misma celda.
Este código:
<pre>
{| 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
|}
</pre>
produce la siguiente tabla:
{| 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, sólo de las celdas comunes.
=== Ejemplo de tabla dinámica ===
==== Tabla dinámica sencilla ====
{{VT|Plantilla:Orden}}
<pre>
{| 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
|}
</pre>
Ese código genera la siguiente tabla:
{| 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
|}
==== Tabla dinámica con encabezado y varios parámetros ====
<pre>
{| border="0" style="background:#ffffff" align="top" class="sortable wikitable"
|+ align="center" style="background:DarkSlateBlue; color:white"|<big>'''Encabezado de la tabla'''</big>
! width="60 px" style="background:Lavender; color:Black"|Título 1
! width="80 px" style="background:Lavender; color:Black"|Título 2
! width="100 px" style="background:Lavender; color:Black"|Título 3
! width="120 px" style="background:Lavender; color:Black"|Título 4
! width="140 px" style="background:Lavender; color:Black"|Título 5
|-
|info 1||info 2||info 3||info 4||info 5
|-
|info 6||info 7||info 8||info 9||info 10
|}
</pre>
Ese código genera la siguiente tabla:
{| border="0" style="background:#ffffff" align="top" class="sortable wikitable"
|+ align="center" style="background:DarkSlateBlue; color:white"|<big>'''Encabezado de la tabla'''</big>
! width="60 px" style="background:Lavender; color:Black"|Título 1
! width="80 px" style="background:Lavender; color:Black"|Título 2
! width="100 px" style="background:Lavender; color:Black"|Título 3
! width="120 px" style="background:Lavender; color:Black"|Título 4
! width="140 px" style="background:Lavender; color:Black"|Título 5
|-
|info 1||info 2||info 3||info 4||info 5
|-
|info 6||info 7||info 8||info 9||info 10
|}
=== Tabla de multiplicar ===
Hemos complicado un poco esta tabla poniendo atributos de alineación a celdas y a filas enteras para que 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.
==== Código fuente ====
<div style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>
{| border="1" cellpadding="2"
|+ Tabla de multiplicar
|-
! &times; !! align="right" | 1 !! align="right" | 2 !! align="right" | 3
|-
! align="right" | 1
| align="right" | 1 || align="right" | 2 || align="right" | 3
|- align="right"
! 2
| 2 || 4 || 6
|- align="right"
! 3
| 3 || 6 || 9
|- align="right"
! 4
| 4 || 8 || 12
|- align="right"
! 5
| 5 || 10 || 15
|}
</nowiki></pre>
</div>
==== Apariencia ====
<div style="background: white; border: 1px solid black; padding: 1em;">
{| 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
|}
</div>
=== Color; alcance de parámetros ===
Hay dos formas de especificar el color del texto y del fondo para una sola celda:
<pre>
{|
| bgcolor="red" | <font color="white" > abc
| def
| style="background:red; color:white" | ghi
| jkl
|}
</pre>
{|
| bgcolor="red" | <font color="white"> abc
| def
| style="background:red; color:white" | ghi
| jkl
|}
Como se ve “font” 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.''
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:
<pre>
{| style="background:yellow; color:green"
|-
| abc
| def
| ghi
|- style="background:red; color:white"
| jkl
| mno
| pqr
|-
| stu
| style="background:silver" | vwx
| yz
|}
</pre>
da
{| style="background:yellow; color:green"
|-
| abc
| def
| ghi
|- style="background:red; color:white"
| jkl
| mno
| pqr
|-
| stu
| style="background:silver" | vwx
| yz
|}
=== Definición de colores ===
Los nombres de los colores que pueden emplearse en una tabla son:
===== Nombres de los colores =====
{|
| style="width:140px; background:Black; color:white" | Black
| style="width:140px; background:DarkGreen; color:white" | DarkGreen
| style="width:140px; background:MidnightBlue; color:white" | MidnightBlue
| style="width:140px; background:DarkSlateGray; color:white" | DarkSlateGray
| style="width:140px; background:Navy; color:white" | Navy
|-
| style="background:Green; color:white" | Green
| style="background:Maroon; color:white" | Maroon
| style="background:DarkBlue; color:white" | DarkBlue
| style="background:DarkRed; color:white" | DarkRed
| style="background:DarkOliveGreen; color:white" | DarkOliveGreen
|-
| style="background:ForestGreen; color:white" | ForestGreen
| style="background:Indigo; color:white" | Indigo
| style="background:SaddleBrown; color:white" | SaddleBrown
| style="background:DarkSlateBlue; color:white" | DarkSlateBlue
| style="background:SeaGreen; color:white" | SeaGreen
|-
| style="background:Brown; color:white" | Brown
| style="background:Teal; color:white" | Teal
| style="background:Purple; color:white" | Purple
| style="background:Olive; color:white" | Olive
| style="background:OliveDrab; color:white" | OliveDrab
|-
| style="background:DimGray; color:white" | DimGray
| style="background:FireBrick; color:white" | FireBrick
| style="background:Sienna; color:white" | Sienna
| style="background:DarkCyan; color:white" | DarkCyan
| style="background:DarkMagenta; color:white" | DarkMagenta
|-
| style="background:MediumBlue; color:white" | MediumBlue
| style="background:LimeGreen; color:white" | LimeGreen
| style="background:MediumSeaGreen; color:white" | MediumSeaGreen
| style="background:Gray; color:white" | Gray
| style="background:SlateGray; color:Black" | SlateGray
|-
| style="background:DarkGoldenrod; color:Black" | DarkGoldenrod
| style="background:Crimson; color:Black" | Crimson
| style="background:SteelBlue; color:Black" | SteelBlue
| style="background:Chocolate; color:Black" | Chocolate
| style="background:LightSlateGray; color:Black" | LightSlateGray
|-
| style="background:MediumVioletRed; color:Black" | MediumVioletRed
| style="background:IndianRed; color:Black" | IndianRed
| style="background:CadetBlue; color:Black" | CadetBlue
| style="background:SlateBlue; color:Black" | SlateBlue
| style="background:LightSeaGreen; color:Black" | LightSeaGreen
|-
| style="background:Peru; color:Black" | Peru
| style="background:Blue; color:Black" | Blue
| style="background:Lime; color:Black" | Lime
| style="background:Red; color:Black" | Red
| style="background:RoyalBlue; color:Black" | RoyalBlue
|-
| style="background:DarkViolet; color:Black" | DarkViolet
| style="background:DarkOrchid; color:Black" | DarkOrchid
| style="background:YellowGreen; color:Black" | YellowGreen
| style="background:OrangeRed; color:Black" | OrangeRed
| style="background:BlueViolet; color:Black" | BlueViolet
|-
| style="background:Goldenrod; color:Black" | Goldenrod
| style="background:DarkSeaGreen; color:Black" | DarkSeaGreen
| style="background:RosyBrown; color:Black" | RosyBrown
| style="background:LawnGreen; color:Black" | LawnGreen
| style="background:Tomato; color:Black" | Tomato
|-
| style="background:DarkKhaki; color:Black" | DarkKhaki
| style="background:SpringGreen; color:Black" | SpringGreen
| style="background:Chartreuse; color:Black" | Chartreuse
| style="background:MediumAquamarine; color:Black" | MediumAquamarine
| style="background:MediumPurple; color:Black" | MediumPurple
|-
| style="background:PaleVioletRed; color:Black" | PaleVioletRed
| style="background:MediumSlateBlue; color:Black" | MediumSlateBlue
| style="background:DarkOrange; color:Black" | DarkOrange
| style="background:DarkGray; color:Black" | DarkGray
| style="background:DarkTurquoise; color:Black" | DarkTurquoise
|-
| style="background:MediumSpringGreen; color:Black" | MediumSpringGreen
| style="background:MediumOrchid; color:Black" | MediumOrchid
| style="background:DodgerBlue; color:Black" | DodgerBlue
| style="background:DeepPink; color:Black" | DeepPink
| style="background:Coral; color:Black" | Coral
|-
| style="background:CornflowerBlue; color:Black" | CornflowerBlue
| style="background:LightCoral; color:Black" | LightCoral
| style="background:MediumTurquoise; color:Black" | MediumTurquoise
| style="background:DarkSalmon; color:Black" | DarkSalmon
| style="background:Salmon; color:Black" | Salmon
|-
| style="background:Orange; color:Black" | Orange
| style="background:SandyBrown; color:Black" | SandyBrown
| style="background:Tan; color:Black" | Tan
| style="background:GreenYellow; color:Black" | GreenYellow
| style="background:Turquoise; color:Black" | Turquoise
|-
| style="background:LightGreen; color:Black" | LightGreen
| style="background:BurlyWood; color:Black" | BurlyWood
| style="background:DeepSkyBlue; color:Black" | DeepSkyBlue
| style="background:LightSalmon; color:Black" | LightSalmon
| style="background:Orchid; color:Black" | Orchid
|-
| style="background:HotPink; color:Black" | HotPink
| style="background:PaleGreen; color:Black" | PaleGreen
| style="background:Silver; color:Black" | Silver
| style="background:Gold; color:Black" | Gold
| style="background:SkyBlue; color:Black" | SkyBlue
|-
| style="background:LightSteelBlue; color:Black" | LightSteelBlue
| style="background:LightSkyBlue; color:Black" | LightSkyBlue
| style="background:Plum; color:Black" | Plum
| style="background:Aquamarine; color:Black" | Aquamarine
| style="background:LightBlue; color:Black" | LightBlue
|-
| style="background:Thistle; color:Black" | Thistle
| style="background:Aqua; color:Black" | Aqua
| style="background:Cyan; color:Black" | Cyan
| style="background:Fuchsia; color:Black" | Fuchsia
| style="background:Magenta; color:Black" | Magenta
|-
| style="background:Yellow; color:Black" | Yellow
| style="background:Khaki; color:Black" | Khaki
| style="background:Violet; color:Black" | Violet
| style="background:LightGrey; color:Black" | LightGrey
| style="background:PowderBlue; color:Black" | PowderBlue
|-
| style="background:LightPink; color:Black" | LightPink
| style="background:PaleGoldenrod; color:Black" | PaleGoldenrod
| style="background:Wheat; color:Black" | Wheat
| style="background:Pink; color:Black" | Pink
| style="background:PaleTurquoise; color:Black" | PaleTurquoise
|-
| style="background:NavajoWhite; color:Black" | NavajoWhite
| style="background:Gainsboro; color:Black" | Gainsboro
| style="background:PeachPuff; color:Black" | PeachPuff
| style="background:Moccasin; color:Black" | Moccasin
| style="background:Bisque; color:Black" | Bisque
|-
| style="background:BlanchedAlmond; color:Black" | BlanchedAlmond
| style="background:AntiqueWhite; color:Black" | AntiqueWhite
| style="background:PapayaWhip; color:Black" | PapayaWhip
| style="background:MistyRose; color:Black" | MistyRose
| style="background:Lavender; color:Black" | Lavender
|-
| style="background:Beige; color:Black" | Beige
| style="background:LightGoldenrodYellow; color:Black" | LightGoldenrodYellow
| style="background:LemonChiffon; color:Black" | LemonChiffon
| style="background:Linen; color:Black" | Linen
| style="background:Cornsilk; color:Black" | Cornsilk
|-
| style="background:OldLace; color:Black" | OldLace
| style="background:WhiteSmoke; color:Black" | WhiteSmoke
| style="background:Honeydew; color:Black" | Honeydew
| style="background:LightCyan; color:Black" | LightCyan
| style="background:LightYellow; color:Black" | LightYellow
|-
| style="background:Seashell; color:Black" | Seashell
| style="background:LavenderBlush; color:Black" | LavenderBlush
| style="background:AliceBlue; color:Black" | AliceBlue
| style="background:FloralWhite; color:Black" | FloralWhite
| style="background:MintCream; color:Black" | MintCream
|-
| style="background:Azure; color:Black" | Azure
| style="background:Ivory; color:Black" | Ivory
| style="background:GhostWhite; color:Black" | GhostWhite
| style="background:Snow; color:Black" | Snow
| style="background:White; color:Black" | White
|}
===== Modelo de color RGB =====
Los colores se pueden definir como combinación de los tres colores básicos: rojo, verde y azul: [[Modelo de color RGB|RGB]]. Para ello se emplea el signo almohadilla (#) seguido de los valores de rojo, verde y azul en [[hexadecimal]], como en los ejemplos siguientes:
{|
| style="width:100px; background:#000000; color:white" | #000000
| style="width:100px; background:#004400; color:white" | #004400
| style="width:100px; background:#008800; color:white" | #008800
| style="width:100px; background:#00cc00; color:white" | #00cc00
| style="width:100px; background:#00ff00; color:white" | #00ff00
|-
| style="background:#440000; color:white" | #440000
| style="background:#444400; color:white" | #444400
| style="background:#448800; color:white" | #448800
| style="background:#44cc00; color:white" | #44cc00
| style="background:#44ff00; color:white" | #44ff00
|-
| style="background:#880000; color:white" | #880000
| style="background:#884400; color:white" | #884400
| style="background:#888800; color:white" | #888800
| style="background:#88cc00; color:white" | #88cc00
| style="background:#88ff00; color:Black" | #88ff00
|-
| style="background:#cc0000; color:white" | #cc0000
| style="background:#cc4400; color:white" | #cc4400
| style="background:#cc8800; color:white" | #cc8800
| style="background:#cccc00; color:Black" | #cccc00
| style="background:#ccff00; color:Black" | #ccff00
|-
| style="background:#ff0000; color:white" | #ff0000
| style="background:#ff4400; color:white" | #ff4400
| style="background:#ff8800; color:Black" | #ff8800
| style="background:#ffcc00; color:Black" | #ffcc00
| style="background:#ffff00; color:Black" | #ffff00
|}
{|
| style="width:100px; background:#000044; color:white" | #000044
| style="width:100px; background:#004444; color:white" | #004444
| style="width:100px; background:#008844; color:white" | #008844
| style="width:100px; background:#00cc44; color:white" | #00cc44
| style="width:100px; background:#00ff44; color:white" | #00ff44
|-
| style="background:#440044; color:white" | #440044
| style="background:#444444; color:white" | #444444
| style="background:#448844; color:white" | #448844
| style="background:#44cc44; color:white" | #44cc44
| style="background:#44ff44; color:Black" | #44ff44
|-
| style="background:#880044; color:white" | #880044
| style="background:#884444; color:white" | #884444
| style="background:#888844; color:white" | #888844
| style="background:#88cc44; color:Black" | #88cc44
| style="background:#88ff44; color:Black" | #88ff44
|-
| style="background:#cc0044; color:white" | #cc0044
| style="background:#cc4444; color:white" | #cc4444
| style="background:#cc8844; color:Black" | #cc8844
| style="background:#cccc44; color:Black" | #cccc44
| style="background:#ccff44; color:Black" | #ccff44
|-
| style="background:#ff0044; color:white" | #ff0044
| style="background:#ff4444; color:Black" | #ff4444
| style="background:#ff8844; color:Black" | #ff8844
| style="background:#ffcc44; color:Black" | #ffcc44
| style="background:#ffff44; color:Black" | #ffff44
|}
{|
| style="width:100px; background:#000088; color:white" | #000088
| style="width:100px; background:#004488; color:white" | #004488
| style="width:100px; background:#008888; color:white" | #008888
| style="width:100px; background:#00cc88; color:white" | #00cc88
| style="width:100px; background:#00ff88; color:Black" | #00ff88
|-
| style="background:#440088; color:white" | #440088
| style="background:#444488; color:white" | #444488
| style="background:#448888; color:white" | #448888
| style="background:#44cc88; color:Black" | #44cc88
| style="background:#44ff88; color:Black" | #44ff88
|-
| style="background:#880088; color:white" | #880088
| style="background:#884488; color:white" | #884488
| style="background:#888888; color:Black" | #888888
| style="background:#88cc88; color:Black" | #88cc88
| style="background:#88ff88; color:Black" | #88ff88
|-
| style="background:#cc0088; color:white" | #cc0088
| style="background:#cc4488; color:Black" | #cc4488
| style="background:#cc8888; color:Black" | #cc8888
| style="background:#cccc88; color:Black" | #cccc88
| style="background:#ccff88; color:Black" | #ccff88
|-
| style="background:#ff0088; color:Black" | #ff0088
| style="background:#ff4488; color:Black" | #ff4488
| style="background:#ff8888; color:Black" | #ff8888
| style="background:#ffcc88; color:Black" | #ffcc88
| style="background:#ffff88; color:Black" | #ffff88
|}
{|
| style="width:100px; background:#0000cc; color:white" | #0000cc
| style="width:100px; background:#0044cc; color:white" | #0044cc
| style="width:100px; background:#0088cc; color:white" | #0088cc
| style="width:100px; background:#00cccc; color:Black" | #00cccc
| style="width:100px; background:#00ffcc; color:Black" | #00ffcc
|-
| style="background:#4400cc; color:white" | #4400cc
| style="background:#4444cc; color:white" | #4444cc
| style="background:#4488cc; color:Black" | #4488cc
| style="background:#44cccc; color:Black" | #44cccc
| style="background:#44ffcc; color:Black" | #44ffcc
|-
| style="background:#8800cc; color:white" | #8800cc
| style="background:#8844cc; color:Black" | #8844cc
| style="background:#8888cc; color:Black" | #8888cc
| style="background:#88cccc; color:Black" | #88cccc
| style="background:#88ffcc; color:Black" | #88ffcc
|-
| style="background:#cc00cc; color:Black" | #cc00cc
| style="background:#cc44cc; color:Black" | #cc44cc
| style="background:#cc88cc; color:Black" | #cc88cc
| style="background:#cccccc; color:Black" | #cccccc
| style="background:#ccffcc; color:Black" | #ccffcc
|-
| style="background:#ff00cc; color:Black" | #ff00cc
| style="background:#ff44cc; color:Black" | #ff44cc
| style="background:#ff88cc; color:Black" | #ff88cc
| style="background:#ffcccc; color:Black" | #ffcccc
| style="background:#ffffcc; color:Black" | #ffffcc
|}
{|
| style="width:100px; background:#0000ff; color:white" | #0000ff
| style="width:100px; background:#0044ff; color:white" | #0044ff
| style="width:100px; background:#0088ff; color:Black" | #0088ff
| style="width:100px; background:#00ccff; color:Black" | #00ccff
| style="width:100px; background:#00ffff; color:Black" | #00ffff
|-
| style="background:#4400ff; color:white" | #4400ff
| style="background:#4444ff; color:Black" | #4444ff
| style="background:#4488ff; color:Black" | #4488ff
| style="background:#44ccff; color:Black" | #44ccff
| style="background:#44ffff; color:Black" | #44ffff
|-
| style="background:#8800ff; color:Black" | #8800ff
| style="background:#8844ff; color:Black" | #8844ff
| style="background:#8888ff; color:Black" | #8888ff
| style="background:#88ccff; color:Black" | #88ccff
| style="background:#88ffff; color:Black" | #88ffff
|-
| style="background:#cc00ff; color:Black" | #cc00ff
| style="background:#cc44ff; color:Black" | #cc44ff
| style="background:#cc88ff; color:Black" | #cc88ff
| style="background:#ccccff; color:Black" | #ccccff
| style="background:#ccffff; color:Black" | #ccffff
|-
| style="background:#ff00ff; color:Black" | #ff00ff
| style="background:#ff44ff; color:Black" | #ff44ff
| style="background:#ff88ff; color:Black" | #ff88ff
| style="background:#ed2afb; color:white" | #ed2afb
| style="background:#f384fb; color:white" | #f384fb
|-
| style="background:#ffccff; color:Black" | #ffccff
| style="background:#FBD6FF; color:black" | #FBD6FF
| style="background:#ffffff; color:Black" | #ffffff
|}
=== Ancho, alto ===
El ancho y el alto de toda la tabla puede ser especificado, como así también el alto de una fila. Para especificar el ancho de una columna uno puede especificar el ancho de una celda en la columna arbitrariamente. 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.
<pre>
{| style="width:400px; height:200px" border="1"
|-
| abc= Nivel Nacional
| def= Facultad de Medicina
| ghi= Hospital Universitario
|- style="height:100px"
| jkl
| style="width:200px" |mno
| pqr
|-
| stu
| vwx
| yz
|-
|123
|456
|789
|}
</pre>
da como resultado:
{| 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
|}
=== Posición ===
Uno puede ubicar la tabla en sí, y todo el contenido de una fila, y el contenido de una celda, pero no con un solo parámetro todo el contenido de una tabla. No use, bajo ninguna circunstancia, “float” para ubicar una tabla. Esto rompería la presentación de la página a fuentes de gran tamaño. ''align'' para el posicionado horizontal y ''valign'' para el vertical.
===Espaciado===
También puede especificar 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'')
=== “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 ====
<blockquote style="background: white; border: 1px solid black; padding: 1em; overflow: scroll">
<pre><nowiki>
{| 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
|}
|}</nowiki></pre>
</blockquote>
==== Apariencia ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| 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
|}
|}
</blockquote>
==Tipos de tablas==
===Ordenables===
:''Hay más información en [[meta:Help:Sorting|Help:Sorting]] (en inglés)''
Algunas tablas se pueden hacer ordenables añadiendo <tt>class="sortable"</tt> (información más detallada en '''[[:en:Help:Sorting|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'' (sub-cabeceras) 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 un columna de números, no se debe colocar texto como "ca." en frente a un número que va a clasificarse como cero. No se debe colocar texto después del 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 en 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, ''sortkeys'' ocultos pueden ser utilizados con el modo de ordenación alfabética.
Una forma de contenido muy abreviada se puede poner en la leyenda fuera de la tabla.
'''En la wiki'''
<div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;"><pre><nowiki>
{| class="wikitable sortable" border="1"
|+ Sortable table
|-
! 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
|}
</nowiki></pre></div>
'''Aparecerá así:''':
<div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;">
{| class="wikitable sortable"
|+ Sortable table
|-
! 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
|}
</div>
<!--
Algunoas ejemplos: [[Wikipedia:Encuentros]], [[Indígenas del Paraguay]], [[Anexo:Países del mundo]].
Guía: [[:en:Help:Table#Sorting]]
Tables can be made sortable by adding <tt>class="sortable"</tt>; for details see '''[[Help:Sorting]]''' (en inglés). Since this can be very useful, it is wise to keep the possibilities and limitations of this feature in mind when designing a table. For example:
* Do not divide a table into sections by subheaders spanning several rows. Instead, an extra column can be made showing the content of these headers on each row, in a short form.
* Do not have elements spanning several columns; instead, again, repeat the content on each row, in a short form.
* In a column of numbers, do not put text such as "ca." in front of a number-it will sort like zero. Do not put text after the number, and do not put a range of numbers (it does not affect the sorting position for numeric sorting mode, and in the case of a range, the first number determines the position, but if, possibly after sorting this or another column, the element is at the top, it will induce alphabetic sorting mode). Instead, put these texts in a separate column. Alternatively, for the greatest flexibility, alphabetic sorting mode with hidden sortkeys can be used.
A long form of abbreviated content can be put as legend outside the table.
'''Wiki markup'''
<div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;"><pre><nowiki>
{| class="wikitable sortable" border="1"
|+ Sortable table
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}
</nowiki></pre></div>
'''As it appears in a browser''':
<div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;">
{| class="wikitable sortable"
|+ Sortable table
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}
</div>
===Sorting and collapsing===
It is possible to collapse a sortable table. To do so, you need to use the code
<tt>{| class="wikitable sortable collapsible"</tt>. Taking the above table and making it collapsable gives you this:
'''Wiki markup'''
<div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;"><pre><nowiki>
{| class="wikitable sortable collapsible" border="1"
|+ Sortable and collapsible table
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}
</nowiki></pre></div>
'''As it appears in a browser''':
<div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;">
{| class="wikitable sortable collapsible"
|+ Sortable and collapsible table
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}
</div>
If you want the table to default to collapsed state, use the code <tt>{| class="wikitable sortable collapsible collapsed"</tt> in place of <tt>{| class="wikitable sortable collapsible"</tt>
-->
== Fusionar celdas ==
=== Fusionar celdas de la misma columna ===
Para fusionar filas utilice '''|rowspan=nºde celdas a fusionar|'''.
<pre>
{| align=right border=1
| Columna 1, fila 1
|rowspan=2| Columna 2, filas 1 y 2)
| Columna 3, fila 1
|-
| Columna 1, fila 2
| Columna 3, fila 2
|}
</pre>
{| align=right border=1
| Columna 1, fila 1
|rowspan=2| Columna 2, filas 1 y 2)
| Columna 3, fila 1
|-
| Columna 1, fila 2
| Columna 3, fila 2
|}
No olvides que esas celdas ya estarán fusionadas por lo que quedarán obviadas en el código. En el ejemplo véase que se ha obviado introducir el contenido de la celda de la columna 2, fila 2.
<br clear="both" />
=== Fusionar celdas de la misma fila ===
Para fusionar columnas utiliza '''|colspan=nºde celdas a fusionar|'''.
<pre>
{| align=right border=1
|colspan=2| Columna 1, filas 1, 2 y 3
|-
| Columna 2, fila 2
| Columna 3, fila 2
|-
| Columna 2, fila 3
| Columna 3, fila 3
|}
</pre>
{| align=right border=1
|colspan=2| Columna 1, filas 1, 2 y 3
|-
| Columna 2, fila 2
| Columna 3, fila 2
|-
| Columna 2, fila 3
| Columna 3, fila 3
|}
No olvides que esas celdas ya estarán fusionadas por lo que quedarán obviadas en el código. En el ejemplo véase que se ha obviado introducir el contenido de las celdas de la columna 1, fila 2 y fila 3.
<br clear="both" />
=== Tabla anidada ===
<pre>
{| border=1
| &alpha;
|
{| bgcolor=#ABCDEF border=2
|tabla
|-
|anidada
|}
|la tabla original de nuevo
|}
</pre>
da una tabla anidada
{| border=1
| α
|
{| bgcolor=#ABCDEF border=2
|tabla
|-
|anidada
|}
|la tabla original de nuevo
|}
'''Las tablas anidadas deben comenzar en una nueva línea.'''
== Otras sintaxis de tablas ==
Otros tipos de sintaxis de '''tablas''' que soporta MediaWiki son:
#XHTML
#HTML y sintaxis wiki <nowiki><td></nowiki>
Los tres son soportados por 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 <nowiki><td></nowiki> 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.
Vea también [[w:HTML element#Tables|HTML element#Tables]] (wiki en inglés). Note sin embargo que los elementos <tt>thead</tt>, <tt>tbody</tt>, <tt>tfoot</tt>, <tt>colgroup</tt> y <tt>col</tt> actualmente no son [[Html#Permitted HTML|soportados en MediaWiki]].
== Comparación ==
<table border="1" cellspacing="0" cellpadding="3">
<caption>Comparación de sintaxis de tablas </caption>
<tr><th> <th>XHTML <th>HTML & Wiki-td <th>Wiki-pipe
<tr>
<th>Tabla
<td><nowiki><table></table></nowiki>
<td><nowiki><table></table></nowiki>
<td><pre><nowiki>{| parámetros
|}</nowiki></pre>
<tr>
<th>Leyenda
<td><nowiki><caption></caption></nowiki>
<td><nowiki><caption></caption></nowiki>
<td><pre><nowiki>|+ leyenda</nowiki></pre>
<tr>
<th>Fila
<td><nowiki><tr></tr></nowiki>
<td><nowiki><tr></nowiki>
<td><pre><nowiki>|- parámetros </nowiki></pre>
<tr>
<th>Celda de datos
<td>
<nowiki><td>celda1</td></nowiki><br />
<nowiki><td>celda2</td></nowiki>
<td>
<nowiki><td>celda1</nowiki><br />
<nowiki><td>celda2</nowiki>
<td>
<pre><nowiki>| celda1
| celda2</nowiki></pre>
<tr>
<th>Celda de datos
<td><nowiki><td>celda1</td> <td>celda2</td> <td>celda3</td></nowiki>
<td><nowiki><td>celda1 <td>celda2 <td>celda3</nowiki>
<td><pre><nowiki>|celda1||celda2||celda3</nowiki></pre>
<tr>
<th>Celda encabezado
<td><nowiki><th></th></nowiki>
<td><nowiki><th></nowiki>
<td><pre><nowiki>! encabezado</nowiki></pre>
<tr>
<th rowspan="2">Tabla ejemplo
<td colspan="3">
<table align="center" border="1" cellspacing="0" cellpadding="3">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<tr>
<td><pre><nowiki>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</nowiki></pre>
<td><pre><nowiki>
<table>
<tr>
<td> 1 <td> 2
<tr>
<td> 3 <td> 4
</table>
</nowiki></pre>
<td><pre><nowiki>
{|
| 1 || 2
|-
| 3 || 4
|}</nowiki></pre>
<tr>
<th rowspan="2">Tabla ejemplo
<td colspan="3">
<table align="center" border="1" cellspacing="0" cellpadding="3">
<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>
<tr>
<td><pre><nowiki>
<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>
</nowiki></pre>
<td><pre><nowiki>
<table>
<tr>
<td> 1 <td> 2
<tr>
<td> 3 <td> 4
<tr>
<td> 5 <td> 6
</table>
</nowiki></pre>
<td><pre><nowiki>
{|
| 1 || 2
|-
| 3 || 4
|-
| 5 || 6
|}</nowiki></pre>
<tr>
<th>Pro
<td valign="top">
Puede ser previsualizado/depurado con cualquier editor XHTML
----
Puede dársele un formato para mejor lectura
----
Bien conocido
<td valign="top">
Puede ser previsualizado/depurado con cualquier editor HTML
----
Puede dársele un formato para mejor lectura
----
Bien conocido
----
Ocupa menos espacio que XHTML
<td valign="top">
Fácil de escribir
----
Fácil de leer
----
Ocupa menos espacio
<tr>
<th>Cons
<td valign="top">
Tedioso
----
Ocupa mucho espacio
----
Difícil de leer rápidamente
<td valign="top">
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
<td valign="top">
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.
<tr><th> <th>XHTML <th>HTML & Wiki-td <th>Wiki-pipe
</table>
== Sintaxis de barras verticales en términos de presentación HTML ==
La sintaxis de barras verticales, desarrollada por [[:m:User:Magnus Manske| Magnus Manske]], substituye barras verticales (<nowiki>|</nowiki>) por HTML. Hay un [http://www.uni-bonn.de/~manfear/html2wiki-tables.php script on-line] que convierte tablas HTML a sintaxis de tablas de barras verticales.
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 <tt>||</tt> para separar celdas en una misma línea. Los parámetros son opcionales.
=== Tablas ===
Una tabla está definida por
<nowiki>
{| ''parámetros''
|}
</nowiki>
que genera el código HTML "<table ''parámetros''>"</table>
:''Cuidado'': '''Debe incluir''' un '''espacio''' entre <tt>'''{|'''</tt> y los <tt>''parámetros''</tt>, 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 abren 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:
<nowiki>!</nowiki>''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 la plantilla {{ep|!}}. Por ejemplo, la siguiente tabla:
<pre>{| class="wikitable" border="1"
|+ Título
|-
| Celda 1 || Celda 2
|}
</pre>
Puede ser sustuituida por el siguiente código, manteniendo la misma funcionalidad:
<pre>{{{!}} class="wikitable" border="1"
{{!}}+ Título
{{!}}-
{{!}} Celda 1 {{!}}{{!}} Celda 2
{{!}}}
</pre>
Este código puede ser introducido en una plantilla, como en el siguiente ejemplo:
<pre>{{Plegable
|título = Caja plegable de ejemplo
|plegada = no
|contenido =
{{{!}} class="wikitable" border="1"
{{!}}+ Título
{{!}}-
{{!}} Celda 1 {{!}}{{!}} Celda 2
{{!}}}
}}</pre>
Dando el siguiente resultado:
{{Plegable
|título = Caja plegable de ejemplo
|plegada = no
|contenido =
{{{!}} class="wikitable" border="1"
{{!}}+ Título
{{!}}-
{{!}} Celda 1 {{!}}{{!}} Celda 2
{{!}}}
}}
== Texto próximo a una tabla ==
''(Para ver los efectos debe aumentar o disminuir el tamaño de la fuente del navegador; también puede cambiar el ancho de la ventana del navegador.)''
Puede usar '''align=right''', y el texto que sigue a la tabla aparecerá a la izquierda de la misma.
{| 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" />
Sin embargo, '''no puede colocar texto preformateado''', este puede solaparse a la tabla.
Para prevenir esto use <nowiki><br style="clear:both;"></nowiki>:
{| 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 claro BR: <br style="clear:both;">
el texto preformateado empezaría solo luego de que la tabla finalizó
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):
{| 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" />
== Espacio alrededor de una tabla, imagen o texto ==
Para crear espacio alrededor de una tabla, imagen o texto cree una tabla de 1x1 alrededor de éstos con “cellpadding”:
{| 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" />
== Ajuste del ancho de las columnas ==
Si quiere forzar el ancho de columna a sus propios requerimientos más que aceptar el ancho del mayor elemento en una celda de una columna entonces siga este ejemplo. Note que el espacio alrededor del texto está impuesto.
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>
{| border="1" cellpadding="2"
!width="50"|Nombre
!width="225"|Efecto
!width="225"|En que juego se encuentra
|-
|Pokeball
|Pokeball normal
|Todas las versiones
|-
|Great Ball
|Mejor que un Pokeball
|Todas las versiones
|}
</nowiki></pre>
</blockquote>
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border="1" cellpadding="2"
!width="50"|Nombre
!width="225"|Efecto
!width="225"| En que juego se encuentra
|-
|Pokeball
|Pokeball normal
|Todas las versiones
|-
|Great Ball
|Mejor que un Pokeball
|Todas las versiones
|}
</blockquote>
== Ajuste de parámetros ==
Al comienzo de una celda adicione su parámetro seguido de una sola barra vertical. Por ejemplo <tt>width=300px|</tt> esto determinará una celda con un ancho de 300 píxeles. Para establecer más de un parámetro deje un espacio entre cada uno.
=== Código Wikipedia ===
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>
{|
|-
| bgcolor=red|celda1 || width=300px bgcolor=blue|celda2 || bgcolor=green|celda3
|}
</nowiki></pre></blockquote>
=== Que se verá así en su navegador ===
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{|
|-
| bgcolor=red|celda1 || width=300px bgcolor=blue|celda2 || bgcolor=green|celda3
|}
</blockquote>
== Alineación del punto decimal ==
Un método para obtener columnas de números alineadas en el punto decimal es como sigue:
<pre><blockquote>
{| cellpadding=0 cellspacing=0 class="col1der col3izq"
| 432 || . || 1
|-
| 43 || . || 21
|-
| 4 || . || 321
|}
</blockquote></pre>
que da
<blockquote>
{| cellpadding=0 cellspacing=0 class="col1der col3izq"
| 432 || . || 1
|-
| 43 || . || 21
|-
| 4 || . || 321
|}
</blockquote>
En casos simples uno puede administrar un rasgo de tabla y simplemente comenzar la línea con un espacio y poniendo espacios en la posición de los números:
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 <tt><nowiki>{|</nowiki></tt>. 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:
{| border="1" cellpadding="2"
|+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:
{| class="wikitable"
|+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 <tt>border="1" cellpadding="2"</tt> con <tt>'''class="wikitable" border="1"'''</tt>.
'''Ya no se permite el uso de la plantilla <nowiki>{{tablabonita}}</nowiki>.''' Reemplazarla por <tt>class="wikitable"</tt>.
== 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 link, la entrada entera es ignorada.
<pre>
<gallery>
Drenthe
Flevoland
Friesland
Gelderland
Groningen
Limburg
North Brabant (capital: [[Den Bosch]])
North Holland
Overijssel
South Holland
Utrecht
Zeeland
</gallery>
</pre>
da:
<gallery>
Drenthe
Flevoland
Friesland
Gelderland
Groningen
Limburg
North Brabant (capital: [[Den Bosch]])
North Holland
Overijssel
South Holland
Utrecht
Zeeland
</gallery>
== Véase también ==
* [[Ayuda:Recursos para Wikipedia]], conversión de tablas a formato Mediawiki.
===Enlaces en inglés===
*[[m:Help:Table]]
*[[m:wiki markup tables]]
*[[m:table background colors]]
*[[w:en:User:Dcljr/Tables]]
*ejemplos:
**[[w:en:Template talk:Chess position|Chess board]]
**[[w:en:Template talk:Game of Go Position|Go board]]
**[[w:en:Monopoly (game)#Board|Monopoly board]]
**[[m:Template talk:Square 8x8 pentomino example|Square 8x8 pentomino example]]
== Enlaces externos ==
(links en inglés)
*[http://www.cnic.org/html2mediawiki.html HTML tables to wiki converter at cnic.org]
*[http://area23.brightbyte.de/csv2wp.php csv2wp] - converts [[w:comma-separated values|comma-separated values]] (CSV) format to pipe syntax. You may use this to import tables from Excel etc. ([[:w:en:wikipedia:de:Benutzer:Duesentrieb/csv2wp|more information]])
*[http://www.wackyboy.com/ConvertHtmlTableToWikiTable.html HTML tables to wiki converter at wackyboy.com]
*[http://pywikipediabot.sourceforge.net/ pywikipediabot] (can convert HTML tables to wiki)
=== Conversores online ===
====De tablas a HTML ====
* [http://tableizer.journalistopia.com/ TABLEIZER!], desde [[hoja de cálculo]].
====De HTML a Wiki ====
*[http://www.uni-bonn.de/~manfear/html2wiki-tables.php HTML to Wiki Converter - tables]. De . Alojado en uni-bonn.de .
*[http://www.cnic.org/html2mediawiki.html HTML tables to wiki converter]. Alojado en cnic.org .
[[Categoría:Ayuda:Editando Wikipedia|Tablas]]
[[ru:Википедия:Оформление таблиц]]