Creación de tablas y uso de tipografías

Tablas

• Las tablas son formas útiles de desplegar la información. En ellas se pueden agregar distintos tipos de tiposgrafías, colores de fondo y letras, bordes redondeados (sólo Mozilla-Firefox), enlaces y demás.

Tipos de tablas

Unión de columnas o filas

• Varias filas o columnas pueden agregarse, es decir, utilizar espacios dobles, triples, etc., según se especifique.

  • Las filas se unen al utilizar el código <|N>, donde N es la cantidad de filas que se unen.

  • Las columnas se unen al utilizar el código <|N>, donde N es la cantidad de filas que se unen.

  Ejemplo

  abarca las filas	abarca 2 columnas
  	celda 2	celda 3

  abarca las filas	abarca 2 columnas
  	fila 2

Estilo en tablas

• A las tablas se le pueden agregar estilos de colores (en letras y fondos), bordes redondeados, etc.
• Para esto existen dos estilos:

  • El estilo nuevo que usa la sección tablestyle, y especifica otras secciones relacionadas a anchos y altos de tablas, tamaño de letras y colores, entre otros.

  • El estilo antiguo que especifica para cada sección su característica particular.

  Se recomienda usar el estilo nuevo .

Ancho y alto de tablas

• Los anchos de las tablas vienen reflejadas en la sección: tablestyle, ó sólo style cuando es se aplica solamente para una sección de la tabla; específicamente en la características width: N%.

• Los altos de las tablas vienen reflejadas en la sección tablestyle, específicamente en la características height: N%.

Alineación del texto en una tabla

• Siempre se utilizan dentro del código <style="...">, para una sección del código.

• La alineación del texto presente en las tablas se aprecia en la sección: text-align que se ve en la parte anterior al texto.

  • Se tienen opciones de center, left, right y justify (centrado, izquierda, derecha, justificado respect.)

  • Cada sección identificatoria se separa con un ;.

Colores de fondo de tabla en tablas

• Siempre se utilizan dentro del código <style="...">, para una sección del código.

• Los colores de se pueden apreciar en la sección background-color: #XXXXXX;, usándose números en código hexadecimal;

variaciones color desde el #000000 negro al #FFFFFF blanco.

Puntas redondeadas - Mozilla-Firefox

Código fuente

||<tablestyle="text-align:center; font-weight: bold; font-size: 0.80em; border: none; width: 100%; -moz-border-radius:15px; background-color:#F2F2F2;" style="border: none;">{{attachment:ChileanTeam/GrupoArte/Iconos/30px/ubuntu.png}}[[ChileanTeam|Inicio Wiki]]||

Puntas redondeadas - Para: IE - MozillaFirefox y otros (Geeko) - Webkit - KHTML

Código fuente

||<tablestyle="text-align:center; font-weight: bold; font-size: 0.80em; border: none; width: 100%;

Sección para puntas redondeadas

-ms-border-radius: 15px;  -moz-border-radius: 15px;  -webkit-border-radius: 15px;  -khtml-border-radius: 15px;

 background-color:#F2F2F2;" style="border: none;">{{attachment:ChileanTeam/GrupoArte/Iconos/30px/ubuntu.png}}[[ChileanTeam|Inicio Wiki]]||

Texto en colores

Código fuente

||<style="color:#990000; font-size: 0.9em;">'''sudo apt-get install ubuntu-cl'''||

Texto de un color #990000, un rojo escuro; tamaño de fuente a 0.8em, es decir de una altura de un 0.8 ó 80% de la fuente natural del texto.

Varios ejemplos de estilos en tablas

• Encabezado
  celda 1	celda 2	celda 3
  abarca las filas	abarca 2 columnas
  	celda 2	celda 3

Código fuente

 ||||||<tablestyle="width: 60%">'''Encabezado'''||
 ||celda 1||celda 2||celda 3||
 ||<|2> abarca las filas ||||<style="background-color: #E0E0FF;"> abarca 2 columnas ||
 ||<rowstyle="background-color: #FFFFE0;">celda 2||celda 3||

Ancho de celda

• estrecho

  ancho

Código fuente

=== Ancho de celda ===
 || estrecho ||<style="width: 99%; text-align: center;"> ancho ||

Contenido en filas y columnas

• 2 filas	fila 1
  	fila 2
  fila 3 sobre 2 columnas

Código fuente

==== Contenido en filas y columnas ====
 ||<|2> 2 filas || fila 1 ||
 || fila 2 ||
 ||<-2> fila 3 sobre 2 columnas ||

Alineación

• izquierda	arriba (superior)	inferior
  centrado
  derecha

Código fuente

==== Alineación ====
 ||<style="text-align: left;">izquierda ||<style="vertical-align: top; text-align: center;"|3> arriba (superior) ||<style="vertical-align: bottom;"|3> inferior ||
 ||<style="text-align: center;"> centrado ||
 ||<style="text-align: right;"> derecha ||

Fuentes

• normal

  negrita

  en rojo

  negrita en rojo

Código fuente

==== Fuentes ====
 || normal ||<style="font-weight: bold;"> negrita ||<style="color: #FF0000;"> en rojo ||<style="color: #FF0000; font-weight: bold;"> negrita en rojo ||

Colores

• rojo

  verde

  azúl

Código fuente

==== Colores ====
 ||<style="background-color: red;"> rojo ||<style="background-color: green;"> verde ||<style="background-color: blue;"> azúl ||

Log de la charla

• CW2-Log

Enlaces, código o páginas de apoyo

• ManualWiki (by FabianDelgado - VARGUX ): https://wiki.ubuntu.com/ChileanTeam/ManualWiki

• Íconos (by FabianDelgado - VARGUX ): https://wiki.ubuntu.com/ChileanTeam/GrupoArte/Iconos

Tipografías

• Nombre/Ejemplo	Demarcado	Notas
  cursiva	''cursiva''	Doble comillas simples
  negrita	'''negrita'''	Triple comillas simples
  monoespaciada	`monosespaciada`	Comilla invertida
  código	{{{código }}}	Agregar  {{{  una línea antes de texto inicial, y   }}} una línea después del texto final de cada línea. Ver el ejemplo.
  subrayado	__subrayado__
  superíndice	^super^índice
  subíndice	,,sub,,índice
  más pequeño	~-más pequeño-~
  más grande	~+más grande+~