Ajuda:Guia de edição/Usar tabelas

As tabelas podem ser úteis para diversas formas de apresentação na Wikipedia. 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 Wikipedia 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 wikicode para criar tabelas.

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

[editar] Que aparece no seu navegador desta maneira

É 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 "http://pt.wikipedia.org/") 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 na Wikipedia.

[editar] 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 idéia. 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 idéia de como isso é possível.

[editar] Código HTML

<table border="1" cellpadding="5" cellspacing="0" align="center">
<caption>'''Tabela de exemplo'''</caption>
<tr>
<th style="background:#101010;">Primeiro Cabeçalho</th>
<th colspan="2" style="background:#002152;">Segundo Cabeçalho</th>
</tr>
<tr>
<td>upper left</td>
<td> </td>
<td rowspan=2 style="border-bottom:3px solid grey;" valign="top">
right side</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" align="center">
<table border="0">
<caption>''Tabela dentro de tabela''</caption>
<tr>
<td align="center" width="150px">[[Imagem:wiki.png]]</td>
<td align="center" width="150px">[[Imagem:wiki.png]]</td>
</tr>
<tr>
<td align="center" colspan="2" style="border-top:1px solid red; 
border-right:1px solid red; border-bottom:2px solid red; 
border-left:1px solid red;">
Dois logos Wikipédia</td>
</tr>
</table>
</td>
</tr>
</table>

[editar] Código Wikipédia

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

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

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

[editar] Código Wikipedia

{| border="1" cellpadding="2"
!Name
!Effect
!Games Found In
|-
|Pokeball ||Regular Pokeball ||All Versions
|-
|Great Ball ||Better than a Pokeball ||All Versions
|-
|Ultra Ball ||Better than a Great Ball
|All Versions
|-
|Master Ball
|Catches any Pokémon without fail.
|All Versions
|}

[editar] Como isso fica no navegador

Name	Effect	Games Found In
Pokeball	Regular Pokeball	All Versions
Great Ball	Better than a Pokeball	All Versions
Ultra Ball	Better than a Great Ball	All Versions
Master Ball	Catches any Pokémon without fail.	All Versions

[editar] 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"
!width="50"|Name
!width="225"|Effect
!width="225"|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

[editar] 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 (taboadas?)
  • 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 idéia. Se o ganho não é tão evidente, considere a possibilidade de não ser uma boa idéia 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.

[editar] Quando tabelas são inconvenientes

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

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

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

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

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

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

[editar] Sem tabela (melhor assim...)

[[Imagem:Covalent.svg|right|]]

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

[editar] 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 "<!-- Para editar o texto desse artigo, pule a tabela. -->", a fim de tranqüilizar 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 (usanto 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 for 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

[editar] Ligações externas

• The Table Sampler Muitos exemplos úteis de tabelas
• Muitos conversores HTML para wiki