Ajuda:Guia de edição/Tabelas

A:TABELA

As tabelas podem ser úteis para diversas formas de apresentação na Wikipédia. Se você tem familiaridade com código HTML, necessário para criar tabelas, pode simplesmente inserir o código diretamente no artigo que estiver editando. As marcas de tabelas normalmente são difíceis de editar, entretanto, especialmente para quem não conhece bem o HTML.

Há algumas situações onde as tabelas não são apropriadas e uma marcação mais simples pode ser usada. Este artigo discute como criar tabelas nos artigos da Wikipédia e quando elas são desnecessárias.

Por favor note que o uso de HTML não é imprescindível. m:Help:Table explica como usar código wiki para criar tabelas.

Para um entendimento rápido sobre as tabelas usando a sintaxe wiki, consulte Ajuda:Guia Prático/Tabelas.

Inserindo tabelas

Vídeo mostrando como inserir tabelas através da janela de edição, é o método mais rápido:

Vídeo mostrando como inserir tabelas através da janela de edição, é o método mais rápido.

De forma resumida os passos para criar tabelas são:

No topo da janela de edição clique em Edição avançada
Clique no ícone de tabela
Coloque as especificações desejadas (título, tamanho, borda, ordenável ou não, etc.)
Preencha a tabela com as informações desejadas
Faça uma previsão para verificar eventuais erros e depois salve/grave a página.

Tabela EXEMPLO (código HTML de tabelas)

<table border="1" cellpadding="2">
<caption>Tabuada de Multiplicação</caption>
<tr><th>×</th><th>1</th><th>2</th><th>3</th></tr>
<tr><th>1</th><td>1</td><td>2</td><td>3</td></tr>
<tr><th>2</th><td>2</td><td>4</td><td>6</td></tr>
<tr><th>3</th><td>3</td><td>6</td><td>9</td></tr>
<tr><th>4</th><td>4</td><td>8</td><td>12</td></tr>
<tr><th>5</th><td>5</td><td>10</td><td>15</td></tr>
</table>

Que aparece no seu navegador desta maneira

Tabuada de Multiplicação
×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

É importante notar no exemplo:

A tabela inteira começa com <table ...> e termina com as marcas necessárias </table>
Um Título (Caption) é uma forma sucinta de descrever sua tabela e pode estar dentro do elemento caption logo após a marca inicial <table>
As Linhas da Tabela são grupos de células na horizontal. Elas começam com <tr> e terminam com as marcas opcionais </tr>
Os Cabeçalhos da Tabela são células com "títulos" e normalmente são apresentados em negrito. Elas começam com <th> e terminam com as marcas opcionais </th>
Os Dados da Tabela são as células que preenchem o resto da tabela cells. Elas começam com <td> e terminam com as marcas opcionais </td>

Os elementos td e th são chamados "células", assim como células em uma Planilha. Cada linha deve possuir o mesmo número de células que as demais linhas, para que o número de colunas em uma tabela permaneça uniforme.(com exceção de células que se expandem para mais de uma coluna ou linha, mas isso não vamos ver agora). Para células vazias, coloca-se dentro dela um código de um "Espaço não quebrável", " ", caso contrário, alguns navegadores poderão não mostrá-las corretamente.

Se sua tabela não apareceu como você esperava, verifique todas as tags HTML. Um erro simples pode fazer muita diferença. Pode ser mais fácil não escrever as tags de fechamento (as que têm "/") de alguns dos elementos que não as requerem (somente alguns elementos HTML não exigem tags de fechamento para serem corretamente exibidas no navegador, embora a w3 recomende enfaticamente o fechamento de todas as tags abertas). O melhor jeito de encontrar erros em sua tabela é checá-la (o código...) no W3C serviço de validação de marcações. Depois de salvo o artigo, copie seu o endereço e cole-o no campo de endereço do validador. Este serviço é bastante útil para tabelas grandes e/ou complexas, uma vez que seria bastante trabalhoso verificá-las visualmente.

Veja o exemplo abaixo, sem as tags de fechamento não obrigatórias:

<table border="1" cellpadding="2">
<caption>Multiplication table</caption>
<tr><th>×<th>1<th>2<th>3
<tr><th>1<td>1<td>2<td>3
<tr><th>2<td>2<td>4<td>6
<tr><th>3<td>3<td>6<td>9
<tr><th>4<td>4<td>8<td>12
<tr><th>5<td>5<td>10<td>15
</table>

Além de tornar o código menor, isso torna a página mais fácil de modificar/atualizar e menos susceptível a erros.

Para quem já está familiarizado com tabelas em HTML, cabe notar que os elementos thead, tbody, tfoot, e colgroup não são suportados pelo MediaWiki^[1].

Outro exemplo (tabela de código HTML)

Aqui temos um exemplo mais avançado, apresentando mais opções disponíveis para marcação de tabelas. Você pode usar estas configurações em sua própria tabela para ver o efeito que têm. Nem todas estas técnicas podem ser adequadas em todos os casos; simplesmente porque se pode colorir os fundos, por exemplo, não significa que será sempre uma boa ideia. Tente manter as marcas relativamente simples em suas tabelas -- lembre-se que outras pessoas podem editar os artigos também! Este exemplo pode dar uma ideia de como isso é possível.

Código HTML

<table border="1" cellpadding="5" cellspacing="0" style="text-align: center;">
<caption><b>Exemplo de tabela</b></caption>
<tr>
<th style="background: #efefef;">Primeiro cabeçalho</th>
<th colspan="2" style="background: #ffdead;">Segundo cabeçalho</th>
</tr>
<tr>
<td>Superior esquerdo</td>
<td></td>
<td rowspan="2" style="border-bottom: 3px solid grey; vertical-align: top;">
<p>lateral direita</p>
</td>
</tr>
<tr>
<td style="border-bottom: 3px solid grey;">inferior esquerdo</td>
<td style="border-bottom: 3px solid grey;">inferior central</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<table border="0">
<caption>''Tabela dentro de tabela''</caption>
<tr>
<td style="width: 150px; text-align: center;">[[Imagem:Wikipedia-logo-pt.png]]</td>
<td style="width: 150px; text-align: center;">[[Imagem:Wikipedia-logo-pt.png]]</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; border: 1px solid red;">Dois logos da Wikipédia</td>
</tr>
</table>
</td>
</tr>
</table>

Código wiki


{| border="1" cellpadding="5" cellspacing="0" style="text-align: center;"
|+'''Exemplo de tabela'''
|-
! style="background: #efefef;" | Primeiro cabeçalho
! colspan="2" style="background: #ffdead;" | Segundo cabeçalho
|-
| Superior esquerdo
|
| rowspan=2 style="border-bottom: 3px solid grey; vertical-align: top;" |
lateral direita
|-
| style="border-bottom: 3px solid grey;" | inferior esquerdo
| style="border-bottom: 3px solid grey;" | inferior central
|-
| colspan="3" style="text-align: center;" |
{| border="0"
|+''Tabela dentro de tabela''
|-
| style="width: 150px; text-align: center;" | [[Imagem:Wikipedia-logo-pt.png]]
| style="width: 150px; text-align: center;" | [[Imagem:Wikipedia-logo-pt.png]]
|-
| colspan="2" style="text-align: center; border: 1px solid red;" | Dois logos da Wikipédia
|}
|}

Como isso seria visualizado

Exemplo de tabela
Primeiro cabeçalho Segundo cabeçalho

Superior esquerdo
lateral direita

inferior esquerdo inferior central

Tabela dentro de tabela

Dois logos da Wikipédia

Ainda outro exemplo (código de tabela MediaWiki)

Este é um exemplo em um novo código wiki, mais simplificado que o usual HTML. o código é entre 10 e 20% mais compacto que o tradicional HTML. Você pode usar um HTML script on-line para converter o código HTML para este novo código wiki.

O código para uma tabela construída linha por linha, coluna por coluna, ou seja, define-se para cada linha as suas colunas (células) assim:

Para iniciar uma tabela: {|
Para definir uma legenda para a tabela e explicar o seu uso (opcional): +
Para iniciar uma linha: |-
Cada célula de dados começa com: |
Cada célula de cabeçalho inicia-se com: !
Para concluir a tabela: |}

Código wiki

{| border="4" cellpadding="2"
! Nome
! Efeito
! Jogos
|-
| Pokeball || Pokeball Normal || Todas as versões
|-
| Great Ball || Melhor que uma Pokeball || Todas as versões
|-
| Ultra Ball || Melhor que uma Great Ball
| Todas as versões
|-
| Master Ball
| Apanha Pokémon sem falhar.
| Todas as versões
|}

Como isso fica no navegador

Nome Efeito Jogos

Pokeball Pokeball Normal Todas as versões

Great Ball Melhor que uma Pokeball Todas as versões

Ultra Ball Melhor que uma Great Ball Todas as versões

Master Ball Apanha Pokémon sem falhar. Todas as versões

Configurando a largura das colunas

Para forçar a largura de uma coluna para um valor específico, ao invés de ter o texto mais largo como determinante da largura, veja o exemplo abaixo. Note que texto fica como numa caixa de textos, com a moldura delimitada.

Código:

{| border="1" cellpadding="2"
! style="width: 50px;" |Name
! style="width: 255px;" |Effect
! style="width: 255px;" |Games Found In
|-
|Pokeball ||Regular Pokeball ||All Versions
|-
|Great Ball ||Better than a Pokeball ||All Versions
|}

Visualização:

Name Effect Games Found In

Pokeball Regular Pokeball All Versions

Great Ball Better than a Pokeball All Versions

Quando tabelas devem ser utilizadas

Tabelas são perfeitas para organizar qualquer informação que se apresente melhor em formado de linhas-e-colunas. Isto inclui, entre outros:

Tabelas matemáticas
- Tabelas de multiplicação
- Tabelas de divisores
- Tabelas de dados
Listas de informação
- Palavras equivalentes em diferentes línguas
- Nome, aniversário, ocupação
- Artista, álbum, ano, título

Em muitos casos, é melhor deixar uma lista simplesmente como uma lista. Alguns artigos têm listas muito longas, que seriam trabalhosas de se editar se em forma de tabela. Use tabelas com parcimônia: antes de editar algo em tabela, considere se a informação ganhará realmente maior claridade se organizada em linhas e colunas. Se for assim, então uma tabela pode ser uma boa ideia. Se o ganho não é tão evidente, considere a possibilidade de não ser uma boa ideia passar horas montando uma tabela, que outro usuário passará outras tantas horas decifrando para editar o artigo.

Tabelas tampouco deveriam ser usadas apenas para criar layouts. Se a informação que você está editando não é tabular em si, então ela não pertence a uma tabela. Tente não usar tabelas para criar letras capitulares (aquela primeira letra bem grande na primeira linha de um paragrafo), legenda em fotografia, organizar links em menus e grupos ou qualquer outra coisa estritamente visual. Isso torna o artigo mais difícil de ser editado por outros wikipedistas, e não foi para isso que se criaram as tabelas.

Quando tabelas são inconvenientes

Listas muito longas, ou muito simples

Se uma lista é particularmente longa, ou é relativamente simples, use uma das listas padrão de formatação da wikipedia. Listas longas podem ser difíceis de administrar quando em forma de tabela, e simples não precisam necessariamente das dimensões de uma tabela. Eis aqui alguns exemplos que ficariam melhor como listas que como tabelas:

Em forma de tabela (não faça isso!)

1980 Ultra Wave

1988 What's Bootsy Doin'?

1994 Blasters of the Universe

1994 Fresh Outta 'P' University

Sem tabela (melhor assim...)

1980: Ultra Wave

1988: What's Bootsy Doin'?

1994: Blasters of the Universe

1994: Fresh Outta 'P' University

Código desta última formatação:

* 1980: Ultra Wave
* 1988: What's Bootsy Doin'?
* 1994: Blasters of the Universe
* 1994: Fresh Outta 'P' University

Organização de imagens

Em muitos casos, recorre-se a tabelas para colocar imagens em artigos. Como tabelas podem flutuar à direita ou esquerda da tela, se tornou comum a prática de se utilizar uma tabela simples de uma única célula para colocar imagens onde se queira. Isso era necessário com navegadores antigos, quanto era pouco comum o suporte aos arquivos de estilos em cascada. Hoje em dia, no entanto, se dá bem com esta tecnologia, e suportam a tag div (layer). Melhor então usar layer que tabelas, neste caso. De qualquer forma, o código da Wikipédia tem possíveis formatações para imagens bem mais simplificadas que layers e tabelas, com muito mais recursos; para instruções mais detalhadas, veja Wikipedia:Política de imagens e também Wikipedia:Como usar imagens. Ainda assim, aqui vai um pequeno exemplo:

Em forma de tabela (não faça isso!)

{| border="0" cellpadding="0" style="text-align: right;" |- | [[Imagem:Covalent.svg]] |}

Sem tabela (melhor assim...)

[[Imagem:Covalent.svg|right]]

Aparência dos dois casos

Nos dois casos acima, o resultado é essencialmente o mesmo: a imagem aparece flutuando do lado direito da tela, e o texto fica à sua volta. Veja como fica o exemplo sem tabela (com texto ilustrativo):

Covalent bonding most frequently occurs between atoms with similar electronegativities, where neither atom can provide sufficient energy to completely remove an electron from the other atom. Covalent bonds are more common between non-metals, whereas ionic bonding is more common between two metal atoms or a metal and a non-metal atom.
Covalent bonding tends to be stronger than other types of bonding, such as ionic bonding. In addition unlike ionic bonding, where ions are held together by a non-directional coulombic attraction, covalent bonds are highly directional. As a result, covalently bonded molecules tend to form in a relatively small number of characteristic shapes, exhibiting specific bonding angles.

E o exemplo em forma de tabela:

Covalent bonding most frequently occurs between atoms with similar electronegativities, where neither atom can provide sufficient energy to completely remove an electron from the other atom. Covalent bonds are more common between non-metals, whereas ionic bonding is more common between two metal atoms or a metal and a non-metal atom.
Covalent bonding tends to be stronger than other types of bonding, such as ionic bonding. In addition unlike ionic bonding, where ions are held together by a non-directional coulombic attraction, covalent bonds are highly directional. As a result, covalently bonded molecules tend to form in a relatively small number of characteristic shapes, exhibiting specific bonding angles.

Possíveis problemas

Tabelas podem causar outras dificuldades, mesmo quando usadas corretamente. Aqui estão algumas questões que você pode querer considerar se usar tabelas nos artigos seus:

Tabelas podem ser difíceis para outras pessoas editarem, especialmente para aquelas que são novas na Wikipédia. Os novos editores podem se sentir desconfortáveis se clicarem em "Editar essa página" e virem um grande bloco ininteligível (para eles) de código HTML. Tente manter as suas tabelas simples, e bem formatadas no código. Você poderia adicionar também um comentário (o qual não apareceria na página renderizada) como "", a fim de tranquilizar os editores.
Se ela é complicada, até mesmo para os autores experientes em HTML, tenha certeza de que a tabela seja renderizada corretamente em todos (ou mesmo muitos) navegadores. Mesmo o menor erro tipográfico pode causar problemas visuais drásticos com a tabela. Você pode estar confiante em suas habilidades para prevenir isso, mas os futuros editores podem não o estar. Novamente, mantenha tabelas simples e bem formatadas, e isso será menos provável de ser um problema.
Tabelas largas, com bastante informação, podem exceder o lado direito da tela em baixas resoluções. Isto é às vezes aceitável, especialmente se o usuário for avisado de antemão (por exemplo, a Tabela periódica (versão grande) é deliberadamente grande). Se você ver que for necessário criar uma tabela muito larga para um artigo, você pode considerar em criar uma versão mais simples e menor para os usuários que não possam usar efetivamente a versão maior (por exemplo, a tabela periódica também está disponível em Tabela periódica (versão menor)).
Se você incluir texto de largura fixada dentro de uma tabela (usando os elementos de HTML como code, pre, ou tt; por exemplo), isso pode forçar a página a ser mais larga do que o necessário. Sempre que possível, evite usar esse tipo de texto dentro de tabelas, assim o texto poderá fluir naturalmente. Um problema similar pode acontecer se você incluir imagens dentro de tabelas (uma vez que imagens usualmente estão determinadas a serem de uma largura específica).
Células que contêm um grande volume de informação podem causar problemas de renderização em alguns navegadores. Em particular, uma célula contendo um parágrafo grande pode misturar a formatação em navegadores de apenas texto como o Lynx. Isto às vezes é necessário, dependendo do tipo de tabela que você está criando mas, se de alguma forma for possível, tente limitar a quantidade de conteúdo que você põe nas células da tabela.
Em alguns navegadores, as tabelas que são alinhadas à direita permitem o texto justificado a passar por cima da borda. Isso pode parecer desagradável. Uma solução é usar style = "margin-left: 0.5em;" no cabeçalho na tabela