Desciclopédia:Tutorial/Como criar uma tabela

Como criar uma tabela... bem, não é tão difícil como parece quando você entende como funciona uma wiki. Basta compreender que {| e |} funcionam como início e fim de uma tabela ou como as tag <table> e </table>, se tiver um pouco das manhas em HTML.

Entendi, agora como crio essa budega?

De forma resumida, temos várias formas de criar uma tabela, que digassi di passagi, são bastante usadas nas infoboxes, como você poderá ver no tutorial que mostra como criar uma predefinição. Normalmente fazemos tabelas usados os dois códigos wiki citados na introdução e sem classes wiki, mas caracterizando pelo atributo style="" ou também usando apenas uma classe wiki que trabalha na caracterização da tabela. Sem mais TL;DR, vamos aos exemplos:

Simples

Primeiramente, vamos mostrar o básico de uma tabela wiki. Segue o código abaixo:

{| width=50% border="1px solid #000"
|-
!Título1
!Título2
!Título3
!...
|-
| Conteúdo || Conteúdo || Conteúdo || ...
|-
| Conteudo || Conteúdo || Conteúdo || ...
|- 
| Conteudo || Conteudo || Conteúdo || ...
|-
| Conteudo || Conteudo || Conteúdo || ...
|}

Que resulta no seguinte:

Título1	Título2	Título3	...
Conteúdo	Conteúdo	Conteúdo	...
Conteudo	Conteúdo	Conteúdo	...
Conteudo	Conteudo	Conteúdo	...
Conteudo	Conteudo	Conteúdo	...

Tá, mas não entendi porra nenhuma!

Calma jovem! Esse é apenas o conceito de uma tabela "crua" da Desciclopédia. As reticências é apenas para indicar que se você quisesse, poderia deixar a tabela com o mesmo comprimento que a circunferência de sua mãe. Como? Segue a explicação:

• {| width=50% border="1px solid #000" – Primeira linha da tabela. É ela quem define as características gerais da tabela. É depois do {| que colocamos as classes da tabela (características completas como a class="wikitable") entre outros atributos, como width (a largura da tabela), border (estilo da borda) ou um style (estilo) com todas as características carregadas juntas.
• |- – Define mudança de linha. No exemplo, depois de quatro campos saltamos para a próxima linha e assim por diante. Por isso que a tabela acima possui 5 linhas x 4 colunas.
• !Títulon – São campos com os títulos das colunas. Campos criados assim possuem seu texto afrodecententizado e centralizado no centro da célula. No nosso exemplo, temos 4 colunas tituladas.
• | Conteúdo || Conteúdo || Conteúdo || ... – Campos normais da tabela. Os dois pipes (||) indicam mudança de campo, como se tivéssemos dividindo os campos. A gente poderia obter o mesmo resultado, se ao invés de dois pipes, saltássemos uma linha e usássemos um pipe só, dessa forma:

{| width=50% border="1px solid #000"
|-
!Título1
!Título2
!Título3
!...
|-
| Conteúdo
| Conteúdo
| Conteúdo
| ...
|-
| Conteúdo
| Conteúdo
| Conteúdo
| ...
|- 
| Conteúdo
| Conteúdo
| Conteúdo
| ...
|-
| Conteúdo
| Conteúdo
| Conteúdo
| ...
|}

Título1	Título2	Título3	...
Conteúdo	Conteúdo	Conteúdo	...
Conteúdo	Conteúdo	Conteúdo	...
Conteúdo	Conteúdo	Conteúdo	...
Conteúdo	Conteúdo	Conteúdo	...

Viu? O resultado é praticamente o mesmo.

Matriz

Também podemos fazer uma matriz, como mostrado abaixo:

{| cellpadding=0 cellspacing=0 border="1px solid gray" width=50%
|-
! -
!Coluna1
!Coluna2
!Coluna3
|-
! Linha1
| Conteúdo
| Conteúdo
| Conteúdo
|-
! Linha2
| Conteúdo
| Conteúdo
| Conteúdo
|- 
! Linha3
| Conteúdo
| Conteúdo
| Conteúdo
|-
! Linha4
| Conteúdo
| Conteúdo
| Conteúdo
|}

Que resulta em:

-	Coluna1	Coluna2	Coluna3
Linha1	Conteúdo	Conteúdo	Conteúdo
Linha2	Conteúdo	Conteúdo	Conteúdo
Linha3	Conteúdo	Conteúdo	Conteúdo
Linha4	Conteúdo	Conteúdo	Conteúdo

Ou da forma um pouco mais identificável...

{| cellpadding=0 cellspacing=0 border="1px solid gray" width=50%
|-
!    -   || Coluna1  || Coluna2  || Coluna3
|-
! Linha1 
| Conteúdo || Conteúdo || Conteúdo
|-
! Linha2 
| Conteúdo || Conteúdo || Conteúdo
|- 
! Linha3 
| Conteúdo || Conteúdo || Conteúdo
|-
! Linha4 
| Conteúdo || Conteúdo || Conteúdo
|}

-	Coluna1	Coluna2	Coluna3
Linha1	Conteúdo	Conteúdo	Conteúdo
Linha2	Conteúdo	Conteúdo	Conteúdo
Linha3	Conteúdo	Conteúdo	Conteúdo
Linha4	Conteúdo	Conteúdo	Conteúdo

Como deve perceber, não tem 1 única maneira de fazer uma tabela. O que importa é entender como algumas coisas funcionam. A mesma explicação para o primeiro exemplo, serve para esta tabela de cima.

Wikitable

Vamos pegar os últimos exemplos e acrescentar como característica, apenas uma class="wikitable". Segue o exemplo mostrado abaixo:

{| class="wikitable"
|-
!Título1
!Título2
!Título3
!     ...
|-
| Conteúdo
| Conteúdo
| Conteúdo
|      ...
|-
| Conteúdo
| Conteúdo
| Conteúdo
|      ...
|- 
| Conteúdo
| Conteúdo
| Conteúdo
|      ...
|-
| Conteúdo
| Conteúdo
| Conteúdo
|      ...
|}

Título1	Título2	Título3	...
Conteúdo	Conteúdo	Conteúdo	...
Conteúdo	Conteúdo	Conteúdo	...
Conteúdo	Conteúdo	Conteúdo	...
Conteúdo	Conteúdo	Conteúdo	...

E o nosso segundo exemplo, como fica com a classe wikitable:

{| class="wikitable"
|-
!    -   || Coluna1  || Coluna2  || Coluna3
|-
! Linha1 
| Conteúdo || Conteúdo || Conteúdo
|-
! Linha2 
| Conteúdo || Conteúdo || Conteúdo
|- 
! Linha3 
| Conteúdo || Conteúdo || Conteúdo
|-
! Linha4 
| Conteúdo || Conteúdo || Conteúdo
|}

-	Coluna1	Coluna2	Coluna3
Linha1	Conteúdo	Conteúdo	Conteúdo
Linha2	Conteúdo	Conteúdo	Conteúdo
Linha3	Conteúdo	Conteúdo	Conteúdo
Linha4	Conteúdo	Conteúdo	Conteúdo

Sim jovem, são os mesmos modelos mostrados anteriormente, só que com o wikitables® são preparados, embalados e saem prontinhos pra consumo.

+ sortable

Quando usado as classes class="wikitable sortable", as tabelas ganham recursos de classificação. Resumindo, as tabelas podem ordenar de acordo com alguma informação de um determinado campo. Abaixo tempos um uso prático de um sortable.

{| class="wikitable sortable"
|-
! Personagem  
! Raça/Subespécie  
! Ki
|-
| Goku 
| Fracassado 
| 8000
|-
| Vegeta 
| Sayajin 
| 2000
|- 
| Nappa 
| ? 
| 1000
|-
| Mr. Satan 
| Humano 
| 9999
|}

O código acima resultará na seguinte tabela classificável:

Personagem	Raça/Subespécie	Ki
Goku	Fracassado	8000
Vegeta	Sayajin	2000
Nappa	?	1000
Mr. Satan	Humano	9999

Ligações Externas

Recomendamos a leitura dos links a seguir se quiser entender mais detalhadamente como funciona uma tabela e também como operá-la de forma avançada aqui na Desciclopédia. Como você quase nunca vai precisar usar isso, deixamos aqui apenas os links para não deixar este manual maior do que já está. Segue abaixo:

• Ajuda:Tabela (em inglês)
• Jimbo:Manual de Estilo/Tabela (também em inglês)