Ayuda:Tablas

Las '''tablas''' pueden ser creadas en paginas wiki usando ciertos elementos de tablas XHTML directamente, o usando formato de código wiki para definir la tabla. Elementos de tabla XHTML y su uso son bien descritos en varios sitios web y no serán discutidos aquí. El beneficio del código wiki es que la tabla es construída de símbolos de caracteres que tienden a hacer mas fácil la percepción de la estructura de la tabla en la vista de edición del artículo, comparado a los elementos de tabla XHTML.

Como regla general, es mejor evadir usar una tabla a menos que necesites una. Crear una tabla a menudo complica la edición en una 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 la asume como la primera fila
|-
|
 <nowiki>!</nowiki> 
| '''encabezado de la celda''', ''opcional.'' Celdas consecutivas de encabezado en la misma linea deben ser separadas con dobles marcas (<code>!!</code>) o comenzar en nuevas líneas, cada una con su propia marca (<code>!</code>).
|- 
|
 <nowiki>|</nowiki>
| '''datos de la celda''', ''requerido!'' Celdas consecutivas de datos en la misma línea deben ser separadas con dobles marcas (<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 buen espaciamiento pero muestra la estructura de tabla en formato wiki más simple.

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

Las celdas en la misma fila pueden ser listadas en una línea separadas por <code>||</code>.

Espacios extras dentro de celdas en el formato wiki, como en el formato wiki que se muestra debajo, no afecta el renderizado de la tabla actual.

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

=== Encabezados de tabla ===
Encabezados de tabla pueden ser creados usando "<code>!</code>" en vez de "<code>|</code>". Los encabezados usualmente de muestran en '''negrita''' y centrados predeterminadamente.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre>
{|
! Ítem
! Cantidad
! Coste
|-
|Naranja
|10
|7.00
|-
|Pan
|4
|3.00
|-
|Mantequilla
|1
|5.00
|-
!Total
|
|15.00
|}
</pre>
|
{|
! Ítem
! Cantidad
! Coste
|-
|Naranja
|10
|7.00
|-
|Pan
|4
|3.00
|-
|Mantequilla
|1
|5.00
|-
!Total
|
|15.00
|}
|}

===Subtítulo===
Un '''subtítulo de tabla''' puede ser añadido 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
|Pie
|-
|Mantequilla
|Helado 
|}
</pre>
|
{|
|+ Complementos alimenticios
|-
|Naranja
|Manzana
|-
|Pan
|Pie
|-
|Mantequilla
|Helado 
|}
|}

== Atributos XHTML ==
Puedes añadir atributos XHTML a las tablas. Para la fuente autoritativa de ellas, vease [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 ===
Poniendo atributos despues del código de inicio de la tabla (<code>{|</code>) aplica atributos 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
|Pie
|500.00
|-
|Mantequilla
|Helado
|1.00
|}
</pre>
|
{| border="1"
|Naranja
|Manzana
|12,333.00
|-
|Pan
|Pie
|500.00
|-
|Mantequilla
|Helado
|1.00
|}
|}

=== Atributos en celdas ===
Puedes poner atributos en '''celdas''' individuales. Por ejemplo, los números pueden verse mejor alineados 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
|Pie
|align="right" | 500.00
|-
|Mantequilla
|Helado
|align="right" | 1.00
|}
</pre>
|
{| border="1"
|Naranja
|Manzana
|align="right"|12,333.00
|-
|Pan
|Pie
|align="right"|500.00
|-
|Mantequilla
|Helado
|align="right"|1.00
|}
|}

Puedes tambien usar atributos de '''celda''' cuando estas poniendo varias celdas en una sola línea. Obsérvese que las '''celdas''' son separadas por <code>||</code>, y dentro de cada '''celda''' los atributos y valores son separados por <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  || Pie       || align="right" | 500.00
|-
| Mantequilla || Helado || align="right" | 1.00
|}
</pre>
|
{| border="1"
| Naranja || Manzana     || align="right" | 12,333.00
|-
| Pan  || Pie       || align="right" | 500.00
|-
| Mantequilla || Helado || align="right" | 1.00
|}
|}

=== Atributos en filas ===
Puedes poner atributos en '''filas''' individuales, también.

{| cellspacing="0" border="1"
!style="width:50%"|Escribes
!style="width:50%"|Obtienes
|-
|
<pre>
{| border="1"
|Naranja
|Manzana
|align="right"|12,333.00
|-
|Pan
|Pie
|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
|Pie
|align="right"|500.00
|- style="font-style:italic; color:green;"
|Mantequilla
|Helado
|align="right"|1.00
|}
|}

=== Con atributos HTML y estilos CSS ===
Atributos de estilos CSS pueden ser añadidos 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
|Pie
|-
|Mantequilla
|Helado 
|}
</pre>
|
{| style="color:green; background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Naranja
|Manzana
|-
|Pan
|Pie
|-
|Mantequilla
|Helado 
|}
|}

'''Atributos''' pueden ser añadidos 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
|Pie
|-
|Mantequilla
|Helado 
|}
</pre>
|
{| border="1" cellpadding="20" cellspacing="0"
|+ align="bottom" style="color:#e76700;" |''Complementos alimenticios''
|-
|Naranja
|Manzana
|-
|Pan
|Pie
|-
|Mantequilla
|1 Helado 
|}
|}

==Advertencias==
===Números negativos===
Si comienzas una celda en una nueva línea con un número negativo con un signo de resta (o un parámetro que lo muestre como número negativo), tu tabla puede arruinarse, porque los carácteres <code>|-</code> serán analizados como formato wiki para la fila de la tabla, no la celda. Para evadir esto, inserte un espacio después del valor (<code>| -6</code>) o use una celda en la misma línea (<code>|| -6</code>).
===CSS vs Atributos===
Los bordes de la tabla especificados a través del CSS junto a un atributo del borde serán renderizados incorrectamente en un pequeño grupo de navegadores de texto.

[[Categoría:Ayuda]]