Mostrar código-fonte de Ajuda:Guia de edição/Usar tabelas

{{Guia de edição}}

As ''tabelas'' podem ser úteis para diversas formas de apresentação na Wiki. 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. [http://meta.wikimedia.org/wiki/Help:Table m:Help:Table] explica como usar wikicode para criar tabelas.'''

{|
| bgcolor="lightyellow|" Para um entendimento rápido sobre as tabelas usando a sintaxe wiki, consulte [[Ajuda:Guia Prático/Tabelas]].
|}











== Tabela EXEMPLO (código HTML de tabelas)==

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>
<table border="1" cellpadding="2">
<caption>Tabuada de Multiplicação</caption>
<tr><th>&times;</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>
</nowiki></pre>
</blockquote>

=== Que aparece no seu navegador desta maneira ===

<table border="1" cellpadding="2">
<caption>Tabuada de Multiplicação </caption>
<tr><th>&times;</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>


É importante notar no exemplo:

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

Os elementos <code>td</code> e <code>th</code> 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",  "<code>&amp;nbsp;</code>", caso contrário, alguns navegadores poderão não mostrá-las corretamente.

Veja o exemplo abaixo, sem as tags de fechamento não-obrigatórias:
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>
<table border="1" cellpadding="2">
<caption>Multiplication table</caption>
<tr><th>&times;<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>
</nowiki></pre>
</blockquote>
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 <code>thead</code>, <code>tbody</code>, <code>tfoot</code>, e <code>colgroup</code> não são suportados na Wikipedia.

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

=== Código HTML ===

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>
<table border="1" cellpadding="5" cellspacing="0" align="center">
<caption>'''Tabela de exemplo'''</caption>
<tr>
<th style="background:#efefef;">Primeiro Cabeçalho</th>
<th colspan="2" style="background:#ffdead;">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>
</nowiki></pre>
</blockquote>

=== Código Wiki ===

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>

{| border="1" cellpadding="5" cellspacing="0" 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;" 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:Rabe_80x80_white.png‎]]
| align="center" width="150px" | [[Imagem:Rabe_80x80_white.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 Wiki |}
|}

</nowiki></pre>
</blockquote>

=== Como isso seria visualizado ===

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border="1" cellpadding="5" cellspacing="0" 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;" 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:Rabe_80x80_white.png‎]]
| align="center" width="150px" | [[Imagem:Rabe_80x80_white.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 Wiki 
|}
|}
</blockquote>

== Ainda outro exemplo (código de tabela MediaWiki)==

=== Código Wiki ===

 <nowiki>
{| border="1" cellpadding="2"
!Unidade
!Tipo
!Edíficio do Origem
|-
|Lanceiro ||Defensiva||Quartel
|-
|Espadachim ||Defensiva ||Quartel
|-
|Batedor ||Ofensiva
|Estábulo
|}
</nowiki>

=== Como isso fica no navegador ===

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border="1" cellpadding="2"

{| border="1" cellpadding="2"
!Unidade
!Tipo
!Edíficio do Origem
|-
|Lanceiro ||Defensiva||Quartel
|-
|Espadachim ||Defensiva ||Quartel
|-
|Batedor ||Ofensiva
|Estábulo
|}
</blockquote>

=== 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:'''

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>
{| border="1" cellpadding="2"
!width="50"|Unidade
!width="225"|Origem
!width="225"|Função
|-
|Lanceiro ||Quartel ||Defesa
|-
|Cavalaria leve ||Estábulo ||Ataque
|}
</nowiki></pre>
</blockquote>

'''Visualização:'''

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border="1" cellpadding="2"
!width="50"|Unidade
!width="225"|Origem
!width="225"|Função
|-
|Lanceiro ||Quartel||Defesa
|-
|Cavalaria Pesada ||Estábulo ||Ataque
|}
</blockquote>

== 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 
** Tabelas da relação entre a o nivel e os recursos necessarios para o construir;
** Defenições dos mundos.
* Listas de informação
** Listagem de edíficos;
** Listagem de unidades;
** Listagem de aldeia bónus.

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 usuários, 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 wiki. 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!) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border="1"
|-----
| 12/02/08 || Abertura do Mundo 1 PT
|-----
| 03/04/08 || Abertura do Mundo 2 PT
|-----
| 08/06/08 || Abertura do Mundo 3 PT
|-----
| 04/09/08 || Abertura do Mundo 4 PT
|}
</blockquote>

==== Sem tabela (melhor assim...) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
*12/02/08: Abertura do Mundo 1 PT
*03/04/08: Abertura do Mundo 2 PT
*08/06/08: Abertura do Mundo 3 PT
*04/09/08: Abertura do Mundo 4 PT
</blockquote>

Código desta última formatação:

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>
*12/02/08: Abertura do Mundo 1 PT
*03/04/08: Abertura do Mundo 2 PT
*08/06/08: Abertura do Mundo 3 PT
*04/09/08: Abertura do Mundo 4 PT
</nowiki></pre>
</blockquote>

=== 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 <code>div</code> (layer). Melhor então usar layer que tabelas, neste caso. De qualquer forma, o código da wiki tem possíveis formatações para imagens bem mais simplificadas que layers e tabelas, com muito mais recursos; para instruções mais detalhadas, veja [[Wiki:Política de imagens]] e também [[Wiki:Como usar imagens]]. Ainda assim, aqui vai um pequeno exemplo:

==== Em forma de tabela (não faça isso!) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<code><nowiki>
{| align="right" border="0" cellpadding="0"
|-----
| [[Imagem:Rabe_80x80_white.png‎]]
|}</nowiki></code>
</blockquote>

==== Sem tabela (melhor assim...) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<code><nowiki>[[Imagem:Rabe_80x80_white.png‎|right|]]
</nowiki></code>
</blockquote>

==== 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):

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<div style="float:right; margin: 0 0 1em 1em;">[[Imagem:Rabe_80x80_white.png‎|40px]]</div>
A wiki é um encoplédia, que visa informar todos os jogadores do TribalWars PT e TribalWars BR, das definições dos mundos, especifícidades das unidades e dos edíficios, bem como de possiveis tácticas que podem implementar no jogo.

</blockquote>

'''E o exemplo em forma de tabela''':

<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| align="right" border="0" cellpadding="0"
|-----
| [[Imagem:Rabe_80x80_white.png‎|40px]]
|}
A wiki é um encoplédia livre que visa informar todos os jogadores do TribalWars PT e TribalWars BR, das definições dos mundos, especifícidades das unidades e dos edíficios, bem como de possiveis tácticas que podem implementar no jogo.

</blockquote>

== 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 Wiki. 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 "<code>&lt;!-- Para editar o texto desse artigo, pule a tabela. --&gt;</code>", 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. Se você vir que é 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.
* Se você incluir texto de largura fixada dentro de uma tabela (usanto os elementos de HTML como <code>code</code>, <code>pre</code>, ou <code>tt</code>; 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).
* 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 <code>style = "margin-left: 0.5em;"</code> no cabeçalho na tabela <!-- Alguém com algum conhecimento pode desejar verificar se isso é apropriado em todas as cincunstâncias -->

[[Categoria:Wiki]]

Baseado [http://pt.wikipedia.org/wiki/Ajuda:Guia_de_edi%C3%A7%C3%A3o/Usar_tabelas]