MoinMaster: AjudaComTabelas

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

• valores separados por vírgula: ver AjudaComParsers#csvparser

• incluir páginas do wiki: ver Include

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

• ver macro MiniPage