Cómo hacer páginas - Tablas

Es posible contruir tablas con los WikiMarkup. Agregar una tabla es sencillo y además se puede configurar la apariencia de cada tabla.


Editar

1 - Tablas Básicas

Una tabla simple se compone de filas y cada fila posee una serie de celdas.

{|
| Celda 1.1
| Celda 1.2
|-
| Celda 2.1
| Celda 2.2
|}

resultará en

Celda 1.1Celda 1.2
Celda 2.1Celda 2.2

Dependiendo del Tema que tenga activo la wiki las tablas podrán verse en forma diferente. Otra forma de escribir la misma tabla es:

{|
| Celda 1.1 || Celda 1.2
|-
| Celda 2.1 || Celda 2.2
|}

Como se puede ver, una tabla comienza con {| y termina con |}. Una barra vertical simple comienza una celda de la tabla, mientras que una barra vertical y un guion (|-) comienza una nueva fila en la tabla. Una barra vertical doble separa dos o mas celdas de la misma fila.

Editar

2 - Opciones Avanzadas

Una tabla puede tener un título. Se puede agregar este mediante una barra vertical y un mas (+) luego del tag de la tabla.

{|
|+ Esta es una tabla
| Celda 1.1 || Celda 1.2
|-
| Celda 2.1 || Celda 2.2
|}

produce

Esta es una tabla
Celda 1.1Celda 1.2
Celda 2.1Celda 2.2

También es posible crear encabezados para filas y columns; estos se identifican con un signo de exclamación.

{|
! Celdas x.1 !! Celdas x.2
|-
| Celda 1.1 || Celda 1.2
|-
| Celda 2.1 || Celda 2.2
|}

genera

Celdas x.1Celdas x.2
Celda 1.1Celda 1.2
Celda 2.1Celda 2.2

También es posible crear encabezados de filas.

{|
! X !! x.1 !! x.2
|-
! 1.x
| Celda 1.1 || Celda 1.2
|-
! 2.x
| Celda 2.1 || Celda 2.2
|}

genera

Xx.1x.2
1.xCelda 1.1Celda 1.2
2.xCelda 2.1Celda 2.2

Editar

3 - Apariencia de la Tabla

Es posible modificar la apariencia de una taba (de las filas y de las columnas también) usando tags XHTML.

{| border="1" bgcolor="Gray"
| Celda 1.1 || Celda 1.2
|-
| Celda 2.1 || Celda 2.2
|}

genera

Celda 1.1Celda 1.2
Celda 2.1Celda 2.2

También se puede modificar la apariencia de una fila. En este caso se debe agregar un separador de fin de fila en forma manual.

{| cellspacing="0" cellpadding="2" border="1"
|- style="background-color: Red; color: White;"
| Celda 1.1 || Celda 1.2
|- style="font-weight: bold;"
| Celda 2.1 || Celda 2.2
|}

produce

Celda 1.1Celda 1.2
Celda 2.1Celda 2.2

Inclusive se puede dar estilo a cada celda.

{|
| bgcolor="Blue" | Celda con estilo
| Celda normal
|-
| Celda normal
| bgcolor="Yellow" | Celda con estilo
|}

Celda con estiloCelda normal
Celda normalCelda con estilo

Editar

4 - Uniendo Celdas

Se puede usar atribtos XHTML para unir una o mas celdas (horizontales o verticales).
Nota: no todos los exploradores soportan estas características.

{|
| colspan="2" bgcolor="Red" | Celda
|-
| Celda || Celda
|}

genera

Celda
CeldaCelda

mientras que

{|
| rowspan="2" bgcolor="Red" | Celda
| Celda
|-
| Celda
|}

genera

CeldaCelda
Celda

Editar

5 - Alineación

Se puede alinear una tabla a la izquierda, a la derecha o centrarla en la página.

{| align="right" border="1"
| Celda || Celda
|}

produce

CeldaCelda

mientras que

{| style="margin: 0px auto;" border="1"
| Celda || Celda
|}

resulta en

CeldaCelda

Editar

6 - Todo Junto



{| cellspacing="0" cellpadding="2" style="background-color: #EEEEEE;"
|+ Tabla con Estilos
|- style="background-color: #990000; color: #FFFFFF;"
| Esta es una celda || Esta es una celda || Esta es una celda
|-
| style="background-color: #000000; color: #CCCCCC;" | Celda con estilo
| style="border: solid 1px #FF0000;" | Celda con estilo
| '''Celda normal'''
|-
| Normal || Normal || [Ayuda|Link a la Ayuda]
|}

produce

Tabla con Estilos
Esta es una celdaEsta es una celdaEsta es una celda
Celda con estiloCelda con estiloCelda normal
NormalNormalLink a la Ayuda