Mostra la font per a Ajuda:Tables

Las '''tablas''' se pueden crear en páginas wiki usando directamente ciertos elementos de tablas XHTML, o bien usando formato de código wiki para definir la tabla. Los elementos de tabla XHTML y su uso están bien descritos en varios sitios web y no se discutirán aquí. La ventaja de usar el código wiki es que la tabla se construye mediante caracteres que tienden a hacer más fácil la percepción de la estructura de la tabla en la vista de edición del artículo, en comparación con los elementos de tabla XHTML.

Como regla general, es mejor evitar el uso de una tabla a menos que realmente la necesites, pues la inclusión de tablas complica la edición de la página.

== Sumario de formato de tablas en código wiki ==
{|cellpadding="5" cellspacing="0" border="1" width="60%"
|
 <nowiki>{|</nowiki>
| '''inicio de tabla'''
|-
|
 <nowiki>|+</nowiki>
| '''subtítulo de la tabla,''' ''opcional;'' sólo entre '''inicio de tabla''' y la primera '''fila'''
|-
|
 <nowiki>|-</nowiki>
| '''fila,''' ''opcional en la primera fila'' -- el software wiki lo asume en la primera fila
|-
|
 <nowiki>!</nowiki> 
| '''encabezado de la celda''', ''opcional''. Si hay celdas consecutivas de encabezado en la misma línea, deben separarse con una marca doble (<code>!!</code>) o comenzar en nuevas líneas, cada una con su propia marca (<code>!</code>).
|- 
|
 <nowiki>|</nowiki>
| '''datos de la celda''', ''requerido''. Si hay celdas consecutivas de datos en la misma línea, deben separarse con una marca doble (<code><nowiki>||</nowiki></code>) o comenzar en nuevas líneas, cada una con su propia marca (<code><nowiki>|</nowiki></code>).
|-
|
 <nowiki>|}</nowiki>
| '''fin de la tabla''' 
|}

==Básicos==
La siguiente tabla carece de bordes y de un buen espaciado, pero muestra la estructura de tabla en el formato wiki más simple.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre>
{|
|Naranja
|Manzana
|-
|Pan
|Pastel
|-
|Mantequilla
|Helado 
|}
</pre>
|
{|
|Naranja
|Manzana
|-
|Pan
|Pastel
|-
|Mantequilla
|Helado
|}
|}

Las celdas de la misma fila pueden listarse en una línea separándolas con <code>||</code>.

Los espacios extra dentro de una celda en el formato wiki no afectan al aspecto de la tabla, como se demuestra a continuación.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre>
{|
|  Naranja    ||   Manzana   ||   más
|-
|   Pan    ||   Pastel     ||   más
|-
|   Mantequilla   || Helado ||  y más
|}
</pre>
|
{|
|  Naranja    ||   Manzana   ||   más
|-
|   Pan    ||   Pastel     ||   más
|-
|   Mantequilla   || Helado ||  y más
|}
|}

=== Encabezados de tabla ===
Se pueden crear encabezados de tabla usando "<code>!</code>" en vez de "<code>|</code>". Habitualmente, los encabezados se muestran por defecto en '''negrita''' y centrados.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre>
{|
! Elemento
! Cantidad
! Precio
|-
|Naranja
|10
|7,00
|-
|Pan
|4
|3,00
|-
|Mantequilla
|1
|5,00
|-
!Total
|
|15,00
|}
</pre>
|
{|
! Elemento
! Cantidad
! Precio
|-
|Naranja
|10
|7,00
|-
|Pan
|4
|3,00
|-
|Mantequilla
|1
|5,00
|-
!Total
|
|15,00
|}
|}

===Subtítulo===
Se puede añadir un '''subtítulo de tabla''', al principio de cualquier tabla, como se muestra a continuación.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre>
{|
|+Complementos alimenticios
|-
|Naranja
|Manzana
|-
|Pan
|Pastel
|-
|Mantequilla
|Helado 
|}
</pre>
|
{|
|+ Complementos alimenticios
|-
|Naranja
|Manzana
|-
|Pan
|Pastel
|-
|Mantequilla
|Helado 
|}
|}

== Atributos XHTML ==
Puedes añadir atributos XHTML a las tablas. Consulta la información en [http://www.w3.org/TR/REC-html40/struct/tables.html la página de especificación de tablas de HTML 4.01 de W3C].

=== Atributos en las tablas ===
Si se ponen atributos después del código de inicio de la tabla (<code>{|</code>), se aplicarán a toda la tabla.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre>
{| border="1"
|Naranja
|Manzana
|12 333,00
|-
|Pan
|Pastel
|500,00
|-
|Mantequilla
|Helado
|1,00
|}
</pre>
|
{| border="1"
|Naranja
|Manzana
|12 333,00
|-
|Pan
|Pastel
|500,00
|-
|Mantequilla
|Helado
|1,00
|}
|}

=== Atributos en celdas ===
Puedes poner atributos en '''celdas''' individuales. Por ejemplo, los números suelen leerse mejor si se alinean a la derecha.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre>
{| border="1"
|Naranja
|Manzana
|align="right" | 12 333,00
|-
|Pan
|Pastel
|align="right" | 500,00
|-
|Mantequilla
|Helado
|align="right" | 1,00
|}
</pre>
|
{| border="1"
|Naranja
|Manzana
|align="right"|12 333,00
|-
|Pan
|Pastel
|align="right"|500,00
|-
|Mantequilla
|Helado
|align="right"|1,00
|}
|}

Puedes tambien usar atributos de '''celda''' cuando estás poniendo varias celdas en una sola línea. Obsérvese que las '''celdas''' se separan con <code>||</code> y dentro de cada '''celda''' los atributos y valores se separan con <code>|</code>.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre>
{| border="1"
| Naranja || Manzana     || align="right" | 12 333,00
|-
| Pan  || Pastel       || align="right" | 500,00
|-
| Mantequilla || Helado || align="right" | 1,00
|}
</pre>
|
{| border="1"
| Naranja || Manzana     || align="right" | 12 333,00
|-
| Pan  || Pastel       || align="right" | 500,00
|-
| Mantequilla || Helado || align="right" | 1,00
|}
|}

=== Atributos en filas ===
Puedes poner atributos en '''filas''' individuales.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre>
{| border="1"
|Naranja
|Manzana
|align="right"|12 333,00
|-
|Pan
|Pastel
|align="right"|500,00
|- style="font-style:italic; color:green;"
|Mantequilla
|Helado
|align="right"|1,00
|}
</pre>
|
{| border="1"
|Naranja
|Manzana
|align="right"|12 333,00
|-
|Pan
|Pastel
|align="right"|500,00
|- style="font-style:italic; color:green;"
|Mantequilla
|Helado
|align="right"|1,00
|}
|}

=== Con atributos HTML y estilos CSS ===
Es posible añadir atributos de estilo CSS, con o sin otros atributos HTML.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre style="white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; white-space:pre-wrap; word-wrap:break-word; word-break:break-all;">
{| style="color:green; background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Naranja
|Manzana
|-
|Pan
|Pastel
|-
|Mantequilla
|Helado 
|}
</pre>
|
{| style="color:green; background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Naranja
|Manzana
|-
|Pan
|Pastel
|-
|Mantequilla
|Helado 
|}
|}

Se pueden añadir '''atributos''' a los encabezados y a los subtítulos como se indica a continuación.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre style="white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; white-space:pre-wrap; word-wrap:break-word; word-break:break-all;">
{| border="1" cellpadding="20" cellspacing="0"
|+ align="bottom" style="color:#e76700;" |''Complementos alimenticios''
|-
|Naranja
|Manzana
|-
|Pan
|Pastel
|-
|Mantequilla
|Helado 
|}
</pre>
|
{| border="1" cellpadding="20" cellspacing="0"
|+ align="bottom" style="color:#e76700;" |''Complementos alimenticios''
|-
|Naranja
|Manzana
|-
|Pan
|Pastel
|-
|Mantequilla
|Helado 
|}
|}

==Advertencias==
===Números negativos===
Si comienzas una celda en una nueva línea con un número negativo con un signo menos (o un parámetro que lo muestre como número negativo) la tabla puede alterarse, porque los caracteres <code>|-</code> se interpretarán como formato wiki para la fila de la tabla, no la celda. Para evitar esto, inserta un espacio antes del signo (<code>| -6</code>) o utiliza una celda en la misma línea (<code>||-6</code>).
===CSS frente a atributos===
Es posible que algunos navegadores de texto muestren los bordes de la tabla de forma incorrecta si se especificaron mediante CSS al mismo tiempo que con un atributo del borde.