Edição de tabelas wiki/Declaração

Para criar uma tabela, é necessário delimitar uma parte do texto, declarando-o como sendo uma tabela. Para isto, usam-se as tags {|, para abrir, e |} para fechar.

Em frente da tag de abertura, declaram-se as características visuais da tabela, segundo as propriedades descritas neste módulo. A tag de encerramento não permite configurações.

Os cabeçalhos, células e quebras de linhas serão utilizadas aqui, por se tratarem de partes básicas e essenciais de uma tabela, mas somente serão descritas em seus respectivos capítulos.

Importância dos parâmetros

Ao se escrever o seguinte código, cria-se normalmente a tabela, mas como nenhum parâmetro foi passado, ela é "invisível", como é possível perceber abaixo.

{|
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

E é por isto que é importante usar os parâmetros: para moldar a tabela conforme for necessário.

class

Este parâmetro é o mais básico, já que determina valores-padrão para diversos parâmetros da tabela. Pode ser preenchido apenas com um dos seguintes valores:

wikitable

Torna a tabela o tipo padrão básico usado nos projetos da Wikimedia, e será usada para os demais exemplos deste livro.

{|class="wikitable"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

wikitable sortable

Torna a tabela organizável alfabeticamente ou "contra-alfabeticamente", conforme se clique nos botões correspondentes em cada cabeçalho.

{|class="wikitable sortable"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

wikitable mw-collapsible

Torna a wikitable contrátil.

{| class="wikitable mw-collapsible"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

mw-collapsible mw-collapsed

Torna a wikitable contrátil contraída por padrão.

{| class="wikitable mw-collapsible mw-collapsed"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

style

Faz alterações visuais na tabela. Ao usar mais de uma opção, deve-se separá-las por ponto-e-vírgula.

width

Regula a largura da tabela em relação à página, percentualmente ou em pixels.

{|class="wikitable" style="width: 100%"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

height

Define a altura da tabela em pixels.

{|class="wikitable" style="height: 200px"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

float

Regula a posição da tabela em relação às bordas da página. Aceita as opções right, left e center. A tabela fica flutuante.

{|class="wikitable" style="float:right"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

font-size

Regula o tamanho da fonte da tabela em relação ao padrão dos projetos Wikimedia, percentualmente.

{|class="wikitable" style="font-size: 50%"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

font-style

Determina a aparência do texto.

{|class="wikitable" style="font-style:italic"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

font-family

Determina a fonte do texto.

{|class="wikitable" style="font-family:Garamond"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

text-align

Alinha o texto em relação à célula. As opções possíveis são left, right ou center.

{|class="wikitable" style="text-align:right"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

background

Define a cor de fundo da tabela. Pode ser atribuída qualquer cor, e mesmo transparent. Veja Tabela de cores.

{|class="wikitable" style="background: yellow"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

color

Define a cor do texto da tabela.

{|class="wikitable" style="color: green"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

border

Permite configurar a espessura e a cor das bordas da tabela. A configuração de espessura é opcional, e é possível definir qualquer cor, inclusive transparent.

{|class="wikitable" style="border: 2px solid red;"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

border-collapse

Permite configurar de uma só vez o padding e o cellspacing para existente ou inexistente. Sendo assim, os dois únicos valores possíveis são collapse ou separate (que é o definido por padrão).

margin

Define a distância a que a tabela ficará das margens da página, em pixels.

{|class="wikitable" style="margin: auto"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

border-radius

Ver também: [1]

Define a curvatura das bordas da tabela. Este parâmetro não pode ser aplicado numa tabela com class. Abaixo, o parâmetro border é preenchido apenas para que a borda posso ser visualizada.

{|style="border:1px solid black; border-radius:10px;"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

cellspacing

Define o espaçamento entre as células da tabela. Este parâmetro não pode ser aplicado numa tabela com class. Abaixo, o parâmetro background é preenchido apenas para permitir melhor visualização do efeito. Células também receberam este parâmetro; para mais informações leia Edição de tabelas wiki/As células.

{|style="border:1px solid black; background:red" cellspacing="10"
!Lorem ipsum
!dolor sit amet
|-
|style="background:blue"|consectetuer
|style="background:gray"|adipiscing elit
|-
|style="background:green"|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

text-shadow

Define as propriedades de sombreamento do texto das células da tabela.

{|class="wikitable" style="text-shadow:2px 2px 2px #000"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu

opacity

Define a não-transparência da tabela. Deve ter um valor entre 0 e 1.

{|class="wikitable" style="opacity:0.5"
!Lorem ipsum
!dolor sit amet
|-
|consectetuer
|adipiscing elit
|-
|Etiam eget
|ligula eu lectu
|}

Lorem ipsum	dolor sit amet
consectetuer	adipiscing elit
Etiam eget	ligula eu lectu