Wiki Page Content

Formatação da Tabela

Para criar uma tabela, comece e termine uma linha utilizando um marcador de tabela "||". Entre estes marcadores de início e de fim, pode criar as células que quiser, separando-as com "||". Para obter uma célula centrada que ocupa várias colunas, pode iniciar essas célula com mais do que um marcador de célula. As linhas adjacentes do mesmo nível de avanço que contenham a formatação de tabela, serão agrupadas numa tabela.

Para mais informações sobre a formatação possível, consulte o tópico AjudaNaEdição.

Atributos da Tabela

Para além da opção de repetir os marcadores de células que ocupam várias colunas, pode definir directamente vários atributos de HTML de tabelas. Todos os atributos têm de ser inseridos entre os sinais de menor e maior <...> imediatamente depois do marcador de célula.

A formatação à wiki tem as seguintes opções:

  • <-2>: unir colunas

  • <|2>: unir linhas

  • <style="..."> colocará essa informação de estilo em html (td) da célula

  • <rowstyle="..."> colocará essa informação de estilo em html (tr) da linha

  • <tablestyle="..."> colocará essa informação de estilo em html (table) da tabela

  • <class="..."> colocará essa classe CSS em html (td) da célula

  • <rowclass="..."> colocará essa classe CSS em html (tr) da linha

  • <tableclass="..."> colocará essa classe CSS em html (table) da tabela

  • <id="..."> colocará esse id CSS em html (td) da célula

As opções de estilo é tudo o que precisa para definir o estilo das tabelas. Basta utilizar o estilo CSS formatado aí e será inserido na tag de HTML gerada. Como alternativa, o administrador e o utilizador (o administrador através do ficheiro do tema o utilizador através das UserPreferences podem acrescentar as suas definições ao CSS do moin, para que os utilizadores se possam referir a elas utilizando class e id. Pode utilizar várias opções simultaneamente, escrevendo-as uma a seguir à outra dentro dos mesmos sinais de menor e maior (ex: <tablestyle="..." rowstyle="..."> na primeira célula, para definir o estilo de toda a tabela e da primeira linha).

Suportamos ainda a formatação antiga da tabela. Crie o efeito anexando valores adicionais ao parâmetro style:

  • <50%>: largura da célula (irá adicionar width: 50%; ao estilo)

  • <width="50%">: faz o mesmo

  • <tablewidth="100%">: configura a largura da tabela para 100% (é apenas válido na primeira linha da tabela)

  • <(>: alinhar à esquerda (irá adicionar text-align: left; ao estilo)

  • <:>: centrar (irá adicionar text-align: center; ao estilo)

  • <)>: alinhar à direita (irá adicionar text-align: right; ao estilo)

  • <^>: alinhar ao topo (irá adicionar vertical-align: top; ao estilo)

  • <v>: alinhar ao fundo (irá adicionar vertical-align: bottom; ao estilo)

  • <#XXXXXX>: cor de fundo (irá adicionar background-color: #XXXXXX; ao estilo)

  • <bgcolor="#XXXXXX"> faz o mesmo

  • <rowbgcolor="#XXXXXX"> define a cor de fundo da linha (é apenas válido na primeira célula)

  • <tablebgcolor="#XXXXXX"> define a cor de fundo da tabela

Se utilizar várias opções conflituosas como <(:)>, a última opção ganha. Não existe nenhum opção explícita para centrar verticalmnte (middle), uma vez que essa é sempre a opção por omissão.

Exemplo

 NOVO ESTILO: Apresentação geral da tabela e opções do tipo HTML::
 ||||||<tablestyle="width: 80%">'''Cabeçalho'''||
 ||célula 1||célula 2||célula 3||
 ||<rowspan=2> linhas unidas||||<style="background-color: #E0E0FF;"> 2 colunas unidas||
 ||<rowstyle="background-color: #FFFFE0;">célula 2||célula 3||
 Largura da célula::
 || estreita ||<style="width: 99%; text-align: center;"> larga ||
 Unir linhas e colunas::
 ||<|2> 2 linhas || linha 1 ||
 || linha 2 ||
 ||<-2> linha 3 ocupa 2 colunas ||
 Alinhamento::
 ||<style="text-align: left;">esquerda ||<style="vertical-align: top; text-align: center;"|3> topo ||<style="vertical-align: bottom;"|3> fundo ||
 ||<style="text-align: center;"> centro ||
 ||<style="text-align: right;"> direita ||
 Fontes::
 || normal ||<style="font-weight: bold;"> negrito ||<style="color: #FF0000;"> vermelho ||<style="color: #FF0000; font-weight: bold;"> vermelho negrito ||
 Cores::
 ||<style="background-color: red;"> vermelho ||<style="background-color: green;"> verde ||<style="background-color: blue;"> azul ||

 ESTILO ANTIGO: Apresentação geral da tabela e opções do tipo HTML::
 ||||||<tablewidth="80%">'''Cabeçalho'''||
 ||célula 1||célula 2||célula 3||
 ||<rowspan=2> linhas unidas||||<bgcolor="#E0E0FF"> 2 colunas unidas||
 ||<rowbgcolor="#FFFFE0">célula 2||célula 3||
 Largura da célula::
 || estreita ||<:99%> larga ||
 Unir linhas e colunas::
 ||<|2> 2 linhas || linha 1 ||
 || linha 2 ||
 ||<-2> linha 3 ocupa 2 colunas ||
 Alinhamento::
 ||<(> esquerda ||<^|3> topo ||<v|3> fundo ||
 ||<:> centro ||
 ||<)> direita ||
 Cores::
 ||<#FF8080> vermelho ||<#80FF80> verde ||<#8080FF> azul ||
 Quebras de linha nas células::
 || linha 1<<BR>>linha 2||

Exibição

NOVO ESTILO: Apresentação geral da tabela e opções do tipo HTML
  • Cabeçalho

    célula 1

    célula 2

    célula 3

    linhas unidas

    2 colunas unidas

    célula 2

    célula 3

  • Largura da célula
  • estreita

    larga

  • Unir linhas e colunas
  • 2 linhas

    linha 1

    linha 2

    linha 3 ocupa 2 colunas

  • Alinhamento
  • esquerda

    topo

    fundo

    centro

    direita

  • Fontes
  • normal

    negrito

    vermelho

    vermelho negrito

  • Cores
  • vermelho

    verde

    azul

  • ESTILO ANTIGO: Apresentação geral da tabela e opções do tipo HTML
  • Cabeçalho

    célula 1

    célula 2

    célula 3

    linhas unidas

    2 colunas unidas

    célula 2

    célula 3

  • Largura da célula
  • estreita

    larga

  • Unir linhas e colunas
  • 2 linhas

    linha 1

    linha 2

    linha 3 ocupa 2 colunas

  • Alinhamento
  • esquerda

    topo

    fundo

    centro

    direita

  • Cores
  • vermelho

    verde

    azul

  • Quebras de linha nas células
  • linha 1
    linha 2

  • Inserir dados de tabela de outras fontes

    Listas com marcas e outro conteúdo complexo dentro de células

    [ANHÄNGEN]