Wiki Page Content

Etiquetamiento de Tablas

Para crear una tabla, empieza y termina una línea usando el marcador "||". Entre estos dos marcadores de comienzo y fin, puedes crear cualquier número de celdas, separándolas con un "||". Para obtner una celda centrada que se expanda entre varias columnas, puedes empezar esa celda con más de un markador de celda. Las líneas adyacentes del mismo nivel de identación que contengan etiquetado de la tabla son combinados en una tabla.

Para más información sobre el etiquetamiento posible, mira AyudaSobreEdición.

Atributos de Tablas

Aparte de la opción de repetir marcadores de celda para obtener las columnas exparsidas en varias otras columnas, puedes configurar muchos atributos HTML de tablas. Cualquier atributo tiene que ser puesto entre paréntesis angulares <...> directamente después del marcador de la celda.

El etiquetamiento tipo wiki tiene las siguientes opciones:

  • <-2>}: Se exparse entre columnas

  • <|2>: Se exparse entre filas.

  • <style="..."> colocará ese información de estilo en la celda (td) html.

  • <rowstyle="..."> colocará ese estilo en la fila (tr) html.

  • <tablestyle="..."> colocará esa información de estilo en la celda (table) html.

  • <class="..."> pondrá esa clase CSS en la celda (td) html

  • <id="..."> pondrá ese didentificador CSS en la celda (td) html

Las cosas de estilo son todo lo que necesitas para estilizar tus tablas. Sólo usa el estilo formateado en CSS allí y este será embebido en las líneas generadas de etiquetas HTML. Alternativamente, extiende el CSS de moin por tus propias definiciones y refierete a ellas usando class o id. Puedes usar varias opciones al mismo tiempo, escribíendolas una después de la otra en los mismos paréntesis angulares (e.j. <tablestyle="..." rowstyle="..."> en la primera celda, para configurar tanto el estilo de ancho de la tabla como el estilo de la primera fila).

Aun soportamos el vieo etiquetamiento de tablas, pero genera el efecto anexando valores adicionales al parámetro style:

  • <50%>: ancho de celda (anexará width: 50%; al estilo)

  • <width="50%">: hace lo mismo

  • <tablewidth="100%">: coloca el ancho de la tabla al 100% (sólo valido en la primera fila de la tabla)

  • <(>: alineado a la izquierda (anexará text-aling: left; al estilo)

  • <:>: centrado (anexará text-align: center; al estilo)

  • <)>: alineado a derecha (anexará text-align: right; al estilo)

  • <^>: alineado arriba (anexará vertical-align: top; al estilo)

  • <v>: alineado abajo (anexará vertical-align: bottom; al estilo)

  • <#XXXXXX>: color de fondo (anexará background-color: #XXXXXX; al estilo)

  • <bgcolor="#XXXXXX"> hace lo mismo

  • <rowbgcolor="#XXXXXX"> configura el color de fondo de la celda (sólo valido en la primera celda)

  • <tablebgcolor="#XXXXXX"> configura el color de fondo de la tabla

Si usas varias opciones conflictivas como <(:)>, la última opción gana. No hay una opción explícita para el centrado vertical (middle), puesto que es siempre la opción por defecto.

Ejemplo

 NUEVO ESTILO: Esquema de tabla general y opciones tipo HTML::
 ||||||<tablestyle="width: 80%">'''Encabezado'''||
 ||cell 1||cell2||cell 3||
 ||<rowspan=2> filas extendidas||||<style="background-color: #E0E0FF;"> extendidas 2 columnas||
 ||<rowstyle="background-color: #FFFFE0;">celda 2||celda 3||
 Ancho de celda::
 || angosta ||<style="width: 99%; text-align: center;"> ancha ||
 Expansión de filas y columnas::
 ||<|2> 2 filas || fila 1 ||
 || fila 2 ||
 ||<-2> fila 3 sobre 2 columnas ||
 Alineamiento::
 ||<style="text-align: left"> izquierda ||<|3 style="vertical-align: top;"> arriba ||<|3 style="vertical-align: bottom;"> abajo ||
 ||<style="text-align: center;"> centrado ||
 ||<style="text-align: right;"> derecha ||
 Colors::
 ||<style="background-color: red;"> rojo ||<style="background-color: green;"> verde ||<style="background-color: blue;"> azul ||

 ESTILO VIEJO: Esquema general de tabla y opciones tipo HTML::
 ||||||<tablewidth="80%">'''Encabezado'''||
 ||celda 1||celda 2||celda 3||
 ||<rowspan=2> se exparse dos filas||||<bgcolor='#E0E0FF'> exparcida 2 columnas||
 ||<rowbgcolor="#FFFFE0">cell2||celda 3||
 Ancho de celda::
 || angosta ||<:99%> ancha ||
 Exparcido de filas y columnas::
 ||<|2> 2 filas || fila 1 ||
 || fila 2 ||
 ||<-2> fila 3 sobre 2 columnas ||
 Alineación::
 ||<(> izquierda ||<^|3> arriba ||<v|3> abajo ||
 ||<:> centrada ||
 ||<)> derecha ||
 Colores::
 ||<#FF8080> rojo ||<#80FF80> verde ||<#8080FF> azul ||

Despliegue

NUEVO ESTILO: Esquema de tabla general y opciones tipo HTML
  • Encabezado

    cell 1

    cell2

    cell 3

    filas extendidas

    extendidas 2 columnas

    celda 2

    celda 3

  • Ancho de celda
  • angosta

    ancha

  • Expansión de filas y columnas
  • 2 filas

    fila 1

    fila 2

    fila 3 sobre 2 columnas

  • Alineamiento
  • izquierda

    arriba

    abajo

    centrado

    derecha

  • Colors
  • rojo

    verde

    azul

  • ESTILO VIEJO: Esquema general de tabla y opciones tipo HTML
  • Encabezado

    celda 1

    celda 2

    celda 3

    se exparse dos filas

    exparcida 2 columnas

    cell2

    celda 3

  • Ancho de celda
  • angosta

    ancha

  • Exparcido de filas y columnas
  • 2 filas

    fila 1

    fila 2

    fila 3 sobre 2 columnas

  • Alineación
  • izquierda

    arriba

    abajo

    centrada

    derecha

  • Colores
  • rojo

    verde

    azul

  • Insertar Tablas de Datos de otras fuentes