Ajuda:Guia de edição/Tabelas: diferenças entre revisões
Conteúdo apagado Conteúdo adicionado
m Reversão de uma ou mais edições de Tatiana Santi para a versão 39883699 de 200.170.226.37, com Reversão e avisos. |
|||
Linha 1:
{{Guia de edição}}
{{atalho|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:
[[File:Tutorial tabelas.ogg|500px|left|Vídeo mostrando como inserir tabelas através da janela de edição, é o método mais rápido.]]
<br />
{{-}}
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) ==
{{Desatualizado}}
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<syntaxhighlight lang="html4strict">
<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>
</syntaxhighlight>
</blockquote>
=== Que aparece no seu navegador desta maneira ===
<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>
É importante notar no exemplo:
* A tabela inteira começa com <code><table ...></code> e termina com as marcas necessárias <code></table></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><table></code>
* As '''Linhas da Tabela''' são grupos de células na horizontal. Elas começam com <code><tr></code> e terminam com as marcas opcionais <code></tr></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><th></code> e terminam com as marcas opcionais <code></th></code>
* Os '''Dados da Tabela''' são as células que preenchem o resto da tabela cells. Elas começam com <code><td></code> e terminam com as marcas opcionais <code></td></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>&nbsp;</code>", caso contrário, alguns navegadores poderão não mostrá-las corretamente.
Se sua tabela não apareceu como você esperava, verifique todas as [[HTML element|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 [http://validator.w3.org/ 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:
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<syntaxhighlight lang="html4strict">
<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>
</syntaxhighlight>
</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 pelo [[MediaWiki]]<ref>Ver [[bugzilla:986|Bug 986]] e [[bugzilla:4740|Bug 4740]]</ref>.
== 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 ===
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<syntaxhighlight lang="html4strict">
<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>
</syntaxhighlight>
</blockquote>
=== Código wiki ===
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>
{| 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
|}
|}
</nowiki></pre>
</blockquote>
=== Como isso seria visualizado ===
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| 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
|}
|}
</blockquote>
== 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 [http://www.uni-bonn.de/~manfear/html2wiki-tables.php HTML script on-line] para converter o código HTML para este novo código wiki.
=== Código wiki ===
<pre>
{| border="1" 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
|}
</pre>
=== Como isso fica no navegador ===
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border="1" 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
|}
</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"
! 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
|}
</nowiki></pre>
</blockquote>
'''Visualização:'''
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| 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
|}
</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 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:
|
nome
completo || Alex SemeDo
|
Nascimento|| 23 de julho de 1992
|Origem|| Cabo Verde
|Pais|| Portugal
|Generos || R&B,POP,Hip Hop
|Influências || Chris Brown, Michael Jackson
==== Sem tabela (melhor assim...) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
* 1980: Ultra Wave
* 1988: What's Bootsy Doin'?
* 1994: Blasters of the Universe
* 1994: Fresh Outta 'P' University
</blockquote>
Código desta última formatação:
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<pre><nowiki>
* 1980: Ultra Wave
* 1988: What's Bootsy Doin'?
* 1994: Blasters of the Universe
* 1994: Fresh Outta 'P' University
</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 [[Cascading Style Sheets|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 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!) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<code><nowiki>
{| border="0" cellpadding="0" style="text-align: right;"
|-
| [[Imagem:Covalent.svg]]
|}</nowiki></code>
</blockquote>
==== Sem tabela (melhor assim...) ====
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
<code><nowiki>[[Imagem:Covalent.svg|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:Covalent.svg|100px]]</div>
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.
</blockquote>
'''E o exemplo em forma de tabela''':
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
{| border="0" cellpadding="0" style="text-align: right;"
|-
| [[Imagem:Covalent.svg|100px]]
|}
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.
</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 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 "<code><!-- Para editar o texto desse artigo, pule a tabela. --></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 (por exemplo, a [[:en:Periodic table (large version)|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 [[:en:Periodic table (standard)| Tabela periódica (versão menor)]]).
* 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).
* 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 (navegador)|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 <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 -->
== Notas ==
<references />
== Ver também ==
{{Wikilivros|Edição de tabelas wiki}}
* [[Ajuda:Guia Prático/Tabelas]]
{{limpar}}
== Ligações externas ==
* {{Link||2=http://hissa.nist.gov/~black/tableQuikRef.html |3=The Table Sampler |4=Muitos exemplos úteis de tabelas}}
* [[meta:Help:Table#External links|Muitos conversores HTML para wiki]]
[[Categoria:!Guia de edição|Tabelas]]
| |||