Desciclopédia:Tutorial/Como criar uma tabela

Origem: Desciclopédia, a enciclopédia livre de conteúdo.
Ir para: navegação, pesquisa
Wikiyt1.png
E
s
s
e
n
c
i
a
l
Manual do Desciclopediano
Os dez mandamentos
Como ser engraçado
e não apenas idiota
Regras
B
á
s
i
c
o
Introdução
Sobre o site
Página de testes
Adicionar links internos e externos
Formatar texto
Separar artigos em seções
Escrever citações
Adicionar imagens e vídeos
Adicionar sons
Criar um artigo
Wikificação
Utilizar HTML
I
n
t
e
r
m
e
d
i
á
r
i
o
Convenção de títulos
Criar tabelas
Mover páginas
Adicionar/criar categorias
Adicionar uma predefinição
Criar uma predefinição
S
o
c
i
a
l
Páginas de discussão
Arquivamento de discussão
Página de usuário
Personalizar assinatura
Criando o seu status
Conheça os fóruns
G
e
r
a
l
Solução de problemas
Guia Prático da Wikipedia
Fórmulas Matemáticas
Outros


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?[editar]

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[editar]

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![editar]

Calma jovem! Esse é apenas o conceito de uma tabela "crua" da Desciclopédia. As reticências é apenas para indica 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[editar]

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[editar]

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[editar]

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[editar]

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: