Tablas

Tables Podemos incluir tablas en nuestra wiki utilizando XHTML o formato wikicode para definir la tabla, nos vamos a centrar en el formato wikicode, ya que este esta formado por símbolos de caracteres que hacen "mas fácil" percivir la estructura de la tabla en la vista edición del articulo en comparación al código XHTML

Tabla resumen de simbolos Wiki

{|	Inicio de la tabla
|+	tabla de título, opcional, sólo entre inicio de la tabla y la primera fila de la tabla
|-	fila de la tabla, opcional en primera fila - wiki supone la primera fila
!	cabecera de la tabla de celda, opcional. consecutiva cabecera de la tabla celda pueden añadir en la misma línea separadas por comillas dobles (!!) o empezar en las líneas nuevas, cada una con su propia marca única (!).
|	Celda de datos , requerido! consecutiva datos de la tabla celdas pueden añadir en la misma línea separadas por comillas dobles (	) o iniciar nuevas líneas, cada una con su propia marca única (|).
|}	Fin la de tabla

• Las marcas anteriormente citadas, deberá comenzar con una nueva línea excepto la doble || y ! para añadir opcionalmente celdas

consecutivas a una línea. Sin embargo, los espacios en blanco al principio de una línea son ignorados.

• Símbolos Para insertar un símbolo que en la wiki significa algo y no se quiere que este activo hay que utilizar la etiqueta '''<nowiki>'''

Conceptos Básico

La tabla siguiente no tiene bordes pero tiene toda las estructura de una tabla de Wiki

Escribir	Resultado
{| |Naranga |Manzana |- |Pan |Tarta |- |Mantequilla |Helado |}	Naranga Manzana Pan Tarta Mantequilla Helado

Las celdas de una misma fila se pueden separar con || Si se quiere que el texto de un salto de linea utilizar<br />

Escribir	Resultado
{| |Naranga||Manzana||more |- |Pan||Tarta||more |- |Mantequilla||Ice<br />cream||and<br />more |}	Naraga Manzana more Pan Tarta more Mantequilla Ice cream and more

Espacios dentro de una celda Wiki no afecta al codigo

Escribir	Resultado
{| | Naraga || Manzana || more |- | Pan || Tarta || more |- | Mantequilla || Helado || and more |}	Naraga Manzana more Pan Tarta more Mantequilla Helado and more

Se puede tener un texto mas extenso dentro de las celdas de una tabla Wiki:

Escribir	Resultado
{| |“Yo he visto cosas que vosotros no creeríais: atacar naves en llamas más allá de Orión. He visto rayos ‘C’ brillar en la oscuridad cerca de la puerta de Tannhauser. Todos estos momentos se perderán como lágrimas en la lluvia…" | * Yo he visto cosas que vosotros no creeríais: * atacar naves en llamas * más allá de Orión. |}	“Yo he visto cosas que vosotros no creeríais: atacar naves en llamas más allá de Orión. He visto rayos ‘C’ brillar en la oscuridad cerca de la puerta de Tannhauser. Todos estos momentos se perderán como lágrimas en la lluvia…" Yo he visto cosas que vosotros no creeríais: atacar naves en llamas más allá de Orión.

Tabla Cabecera

El encabezado de la tabla se puede crear con el uso de "!" (signo exclamación) en lugar de "|" (pipe simbolo). Los encabezados por lo general aparecen en negrita y centrado de forma predeterminada.

Escribir	Resultado
{| ! Concepto ! Nº ! Coste |- |Naraga |10 |7.00 |- |Pan |4 |3.00 |- |Mantequilla |1 |5.00 |- !Total | |15.00 |}	Concepto Nº Coste Naraga 10 7.00 Pan 4 3.00 Mantequilla 1 5.00 Total 15.00

Leyenda

Se puede añadir un titulo adicional en la parte superior:

Escribir	Resultado
{| |+ Alimentación |- |Naraga |Manzana |- |Pan |Tarta |- |Mantequilla |Helado |}	Alimentación Naraga Manzana Pan Tarta Mantequilla Helado

XHTML atributos

Se puede añadir atributos de XHTML ver los codigosthe W3C's HTML 4.01 Specification page on tables.

Atributos de tablas

Colocar los atributos después de la apertura de la tabla ({|) se aplica los atributos en toda la tabla

Escribir	Resultado
{| border="1" |Naraga |Manzana |12,333.00 |- |Pan |Tarta |500.00 |- |Mantequilla |Helado |1.00 |}	Naraga Manzana 12,333.00 Pan Tarta 500.00 Mantequilla Helado 1.00

Atributos de celdas

Se pueden incorporar atributos individuales a las celdas. Por ejemplo, los números quedan mejor alineados a la derecha.

Escribir	Resultado
{| border="1" |Naraga |Manzana |align="right" | 12,333.00 |- |Pan |Tarta |align="right" | 500.00 |- |Mantequilla |Helado |align="right" | 1.00 |}	Naraga Manzana 12,333.00 Pan Tarta 500.00 Mantequilla Helado 1.00

También se puede incorporar los atributos cuando las celdas múltiples en una solo linea, hay que tener en cuenta que las celdas están separadas por || y dentro de cada celda el valor del atributo esta separado por |.

Escribir	Resultado
{| border="1" | Naraga || Manzana || align="right" | 12,333.00 |- | Pan || Tarta || align="right" | 500.00 |- | Mantequilla || Helado || align="right" | 1.00 |}	Naraga Manzana 12,333.00 Pan Tarta 500.00 Mantequilla Helado 1.00

Atributos de filas

Se pueden poner atributos en las lineas.

Escribir	Resultado
{| border="1" |Naraga |Manzana |align="right"|12,333.00 |- |Pan |Tarta |align="right"|500.00 |- style="font-style:italic; color:green;" |Mantequilla |Helado |align="right"|1.00 |}	Naraga Manzana 12,333.00 Pan Tarta 500.00 Mantequilla Helado 1.00

Tabla con 1px de Borde

El formato de borde que utiliza la tabla es "border-collapse: separate" feisimo verdad, si utilizamos 0 como valor los borde se suman y queda pero.

Esto lo podemos solucionar utilizando las propiedades de CSS ya que estas pasa del formato "border-collapse: separate"

Un ejemplo de lo comentado anteriormente una tabla con un 1px de borde sin necesidad de extensiones externas.

Escribir	Resultado
{|style="border-collapse: separate; border-spacing: 0; border-width: 1px; border-style: solid; border-color: #000; padding: 0" |- !style="border-style: solid; border-width: 0 1px 1px 0"| Naraga !style="border-style: solid; border-width: 0 0 1px 0"| Manzana |- |style="border-style: solid; border-width: 0 1px 0 0"| Pan |style="border-style: solid; border-width: 0"| Tarta |}	Naraga Manzana Pan Tarta
{|style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #000" |- !style="border-style: solid; border-width: 1px"| Naraga !style="border-style: solid; border-width: 1px"| Manzana |- |style="border-style: solid; border-width: 1px"| Pan |style="border-style: solid; border-width: 1px"| Tarta |}	Naraga Manzana Pan Tarta

Nota:

• Cuando se utiliza el "border-width:" La propiedad CSS acceso directo, el orden de los cuatro valores especificados separados por un espacio es: arriba, derecha, abajo, izquierda. Cuando hay menos de 4 valores, el valor de la izquierda toma su defecto a partir del valor de la derecha, el valor de la parte inferior tiene su valor por defecto del valor de tapa, y el valor de la derecha toma su defecto a partir del valor de la parte superior.
• Los atributos HTML (como "width =" "border =", "cellspacing =", "cellpadding =") no necesita ninguna unidad de longitud (la unidad de pixel se supone). Las propiedades de estilo CSS (que prevalecen sobre los atributos HTML) requieren una unidad de longitud explícita (si el valor no es 0), como "px" para el píxel.

HTML colspan and rowspan

Puedes usar HTML colspan y rowspan atributos en las células para el diseño avanzado.

Escribir	Resultado
{| border="1" !colspan="6"|Shopping List |- |rowspan="2"|Pan & Mantequilla |Tarta |Buns |Danish |colspan="2"|Croissant |- |Cheese |colspan="2"|Helado |Mantequilla |Yoghurt |}	Shopping List Pan & Mantequilla Tarta Buns Danish Croissant Cheese Helado Mantequilla Yoghurt

Con atributos HTML y estilos CSS

CSS atributos de estilo se puede añadir con o sin otros atributos HTML.

Escribir	Resultado
{| style="color:green; background-color:#ffffcc;" cellpadding="10" cellspacing="0" border="1" |Naraga |Manzana |- |Pan |Tarta |- |Mantequilla |Helado |}	Naraga Manzana Pan Tarta Mantequilla Helado

Los atributos se pueden agregar al título y los encabezados de la siguiente manera.

Escribir	Resultado
{| border="1" cellpadding="20" cellspacing="0" |+ align="bottom" style="color:#e76700;" |''Food complements'' |- |Naraga |Manzana |- |Pan |Tarta |- |Mantequilla |Helado |}	Food complements Naraga Manzana Pan Tarta Mantequilla Helado

Accesibilidad a las celdas de cabecera de la tabla

celdas de la tabla de cabecera no se especifica explícitamente que datos de la tabla se aplican a las células (las relativas a su derecho en la misma fila, o aquellos por debajo de ellos en la misma columna). Cuando la tabla se representa en un entorno 2D visual, esto es generalmente fácil de inferir.

Sin embargo, cuando las tablas se representan en medios de comunicación no visual, usted puede ayudar al navegador para determinar qué celda de encabezado de tabla se aplica a la descripción de cualquier celda seleccionada (para repetir su contenido en algunos ayudante de accesibilidad) con un alcance = "fila" o scope = "col" atributo en las celdas de encabezado de tabla. En la mayoría de los casos con tablas sencillas, vamos a usar scope = "col" en todas las celdas de encabezado de la primera fila, y el alcance = "fila" en la primera celda de las filas siguientes:

Escribir	Resultado
{| border="1" cellspacing="0" cellpadding="2" |- !scope="col"| Item !scope="col"| Quantity !scope="col"| Price |- !scope="row"| Pan | 0.3 kg | $0.65 |- !scope="row"| Mantequilla | 0.125 kg | $1.25 |- !scope="row" colspan="2"| Total | $1.90 |}	Item Quantity Price Pan 0.3 kg $0.65 Mantequilla 0.125 kg $1.25 Total $1.90

Advertencia

Los números negativos

Si inicia una celda en una nueva línea con un número negativo con un signo menos (o un parámetro que se evalúa como un número negativo), la tabla puede romperse, porque los simbolos | - será analizado como el código wiki para la tabla de la fila , no la celda de la tabla. Para evitar esto, inserte un espacio antes del valor (| -6) o la utilización en línea de marcas de células (|| -6).

Atributos CSS

Bordes de la tabla se especifica a través de CSS en lugar del atributo border se hacen de forma incorrecta en un pequeño subconjunto de los navegadores de texto. without any attributes or styles.

wikitable

Podemos utilizar la clases wikitable es un estilo de tabla definida en el skin de la wiki

{| class="wikitable"
!colspan="6"|Shopping List
|-
|rowspan="2"|Pan & Mantequilla
|Tarta
|Buns
|Danish
|colspan="2"|Croissant
|-
|Cheese
|colspan="2"|Helado
|Mantequilla
|Yoghurt
|}

Shopping List
Pan & Mantequilla	Tarta	Buns	Danish	Croissant
	Cheese	Helado		Mantequilla	Yoghurt

Centrar Tabla

{| class="wikitable" style="margin: 1em auto 1em auto"
|+ '''Cells left-aligned, table centered'''
! Duis || aute || irure
|-
| dolor  || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}

Cells left-aligned, table centered

Duis	aute	irure
dolor	in reprehenderit	in voluptate velit
esse cillum dolore	eu fugiat nulla	pariatur.

Tabla cuidado

Aqui el Cuidado

 {|class="cuidado"
 |-
 |align="center"|<i class="fas fa-exclamation-circle text-danger fa-3x"></i>
 |Aqui el '''CUIDADO'''
 |-
 |}

Tabla advertencia

Aqui la Advertencia

 {|class="advertencia"
 |-
 |align="center"|<i class="fas fa-exclamation-circle text-warning fa-3x"></i>
 |Aqui la '''Advertencia'''
 |-
 |}