Abrir menu principal

Desciclopédia β

Desciclopédia:Tutorial/Como criar uma tabela

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:

SimplesEditar

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 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.

MatrizEditar

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.

WikitableEditar

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.

+ sortableEditar

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 ExternasEditar

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: