Se você não conseguir editar a wiki após o login, você precisará solicitar direitos de edição usando este formulário. Você será notificado assim que tais direitos de edição lhe forem concedidos.

Ajuda:Tabelas

Da wiki FamilySearch Wiki
Saltar para a navegação Saltar para a pesquisa
Help-content.png Este "artigo de ajuda" irá guiá-lo como você editar na Wiki. Veja Editar e contribuir para mais artigos de ajuda.

O tema deste artigo é como criar tabelas com Wikitexto ou HTML. Para obter informações sobre como copiar planilhas de Excel e outros programas em uma página wiki, veja Copiar Planilhas na Wiki.


"Referência Rápida:"

{| início da tabela
|- fileira da tabela
| célula de dados da tabela ou coluna
|} final da tabela


NOTA: Esta página explica como criar tabelas com Wikitexto ou HTML desligando o editor FCK, ou a ferramenta wiki de edição. As instruções para a criação de tabelas básicas para iniciantes estão disponíveis no artigo Ajuda: Adicionando tabelas básicas para um artigo. "Instruções avançadas para usuários iniciantes não estão incluídos neste artigo." Instruções avançadas para usuários que não querem criar tabelas usando Wikitexto ou HTML estão disponíveis online em editor FCK para sites. Saiba mais sobre o editor FCK / ferramenta de edição e como desligá-lo e ligá-lo. Instruções especiais estão disponíveis para copiar planilhas ou documentos de Excel para a Wiki.

O que você deve saber antes de criar uma tabela[editar | editar código-fonte]

1. As tabelas que foram criadas em outros programas podem ser importados para a Wiki, no entanto, o processo para fazê-lo é dispendioso. Pode levar menos tempo recriar uma tabela do que importar uma tabela existente para a Wiki.

2. Tabelas podem ser criados nas páginas wiki usando tanto os elementos da tabela HTML diretamente, ou usando a formatação wikicode para definir a tabela. Os elementos da tabela HTML e seu uso são bem descritos em várias páginas da web e não será discutido aqui. O benefício de wikicode é que a tabela é construída de símbolos de caracteres que tendem a torná-lo mais fácil de perceber a estrutura da tabela na visão de edição do artigo em comparação com os elementos da tabela HTML.

Uma boa regra geral é usar tabelas apenas quando necessário. A marcação da tabela pode complicar a edição da página.

Resumo marcação de tabela wiki[editar | editar código-fonte]

{| início da tabela
|+ legenda da tabela, "opcional" apenas uma por tabela e entre o início da tabela e primeira fileira
|- fileira da tabela, "opcional na primeira fileira" -- o motor wiki assume a primeira fileira
! células do cabeçalho da tabela, "opcional". Cabeçalhos da tabela consecutivos pode ser adicionados na mesma fileira separados por marcas de duplos (!!) ou iniciar em novas fileiras, cada uma com a sua própria marca única (!).
| célula de dados da tabela, "necessária!" Células de dados da tabela consecutivas podem ser adicionadas na mesma fileira separadas por marcas de duplos ( || ) ou iniciar em novas fileiras, cada uma com a sua própria marca única ( | ).
|} final da tabela
  • As marcas acima devem começar em uma nova fileira, exceto o duplo || e !! opcionalmente por adição de células consecutivas a uma fileira.
  • Atributos XHTML. Cada marca, com exceção de final de tabela, aceita, opcionalmente, um ou mais atributos XHTML. Atributos devem estar na mesma fileira que a marca. Atributos separados um do outro por um único espaço.
    • Células e legendas (| ou ||,! ou !!, e |+) armazenam conteúdo. Então separar quaisquer atributos de conteúdo com um único pipe (|). O conteúdo da célula pode seguir na mesma fileira ou em fileiras seguintes.
    • tabela e marcas de fileiras ({| e |-) não seguram diretamente o conteúdo. "Não" adicionar pipe (|) após os seus atributos opcionais. Se você erroneamente adicionar um pipe após atributos para a marca de tabela ou marca de fileira o analisador irá excluí-lo "e" o seu atributo final se ele estava tocando o pipe errôneo!
  • O conteúdo pode (a) acompanhar a sua marca de célula na mesma fileira após quaisquer atributos opcionais XHTML ou (b) em fileiras abaixo da marca da célula. Conteúdo que utiliza na marcação wiki que se precisa para começar em uma nova fileira, como listas, cabeçalhos, ou tabelas aninhadas, deve, naturalmente, estar em sua própria fileira.

Tabela Simples[editar | editar código-fonte]

Tabelas Planas[editar | editar código-fonte]

A tabela a seguir carece de bordas e um bom espaçamento, mas mostra a estrutura da tabela de marcação wiki simples

Laranja Maçã
Pão Torta
Manteiga Sorvete
 {| 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 

Tabelas Alternativas[editar | editar código-fonte]

Para mais células de marcação wiki parecendo tabelinha pode ser relacionadas em uma fileira separada por ||. Isto não escala bem para mais conteúdo de célula como parágrafos. Isto funciona bem para excertos de conteúdo no entanto, como a nossa tabela de exemplo.

Espaços extras dentro das células na marcação wiki podem ser adicionados, como eu fiz na marcação wiki abaixo, para fazer a marcação wiki em si parecer melhor, mas eles não afetam a definição da tabela real.

Atributos HTML podem ser adicionados às tabelas nesta página, mas foram deixados de fora do seguinte exemplo pela simplicidade.

Laranja Maçã Mais
Pão Torta Mais
Manteiga Sorvete e mais
 {| 
| Laranja || Maça || mais 
|- 
| Pão || Torta || mais 
|- 
| Manteiga || Sorvete || e mais 
|} 

Tabelas com atributos HTML[editar | editar código-fonte]

Você pode adicionar atributos HTML para fazer a sua tabela se parecer melhor

'"border="1"

Laranja Maçã
Pão Torta
Manteiga Sorvete
 {| border="1" 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 

'"align="center"; border="1"

Laranja Maçã
Pão Torta
Manteiga Sorvete
{| align="center" border="1" 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 

Atributos nas células[editar | editar código-fonte]

Você pode colocar atributos em células individuais. Números, por exemplo, pode parecer mais bem alinhados

Laranja Maçã 12,333.00
Pão Torta 500.00
Manteiga Sorvete 1.00
{| border="1" 
| Laranja 
| Maçã 
| align="right" | 12,333.00 
|- 
| Pão 
| Torta 
| align="right" | 500.00 
|- 
| Manteiga 
| Sorvete 
| align="right" | 1.00 
|} 

Atributos nas fileiras[editar | editar código-fonte]

Você pode colocar atributos nas fileiras individuais, também.

Laranja Maçã 12,333.00
Pão Torta 500.00
Manteiga Sorvete 1.00
{| border="1" 
| Laranja 
| Maçã 
| align="right" | 12,333.00 
|- 
| Pão 
| Torta 
| align="right" | 500.00 
|- style="font-style:italic;color:green;" 
| Manteiga 
| Sorvete 
| align="right" | 1.00 
|} 

'"cellspacing="0" border="1"

Laranja Maçã
Pão Torta
Manteiga Sorvete
{| cellspacing="0" border="1" 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 

'"cellpadding="20" celllspacing="0" border="1"

Laranja Maçã
Pão Torta
Manteiga Sorvete
 {| cellpadding="20" cellspacing ="0" border="1" 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 

Largura, altura[editar | editar código-fonte]

A largura e a altura de toda a tabela pode ser especificada, bem como a altura de uma fileira. Para especificar a largura de uma coluna pode-se especificar a largura de uma célula arbitrária nela. Se a largura não é especificada para todas as colunas, e/ou a altura não é especificada para todas as fileiras, então, existe alguma ambiguidade, e o resultado depende do navegador.

O código de marcação wiki:

 {| style="width: 75%; height: 200px" border="1" 
|- 
| abc || def || ghi 
|- style="height: 100px;" 
| jkl || style="width: 200px;" | mno || pqr 
|- 
| stu || vwx || yz 
|} 

Como aparece no navegador:

abc def ghi
jkl mno pqr
stu vwx yz

Note que style="inline CSS" não tem efeito com alguns navegadores. Se a compatibilidade é importante, as construções mais antigas equivalentes, como width="75%" deve trabalhar em mais navegadores.

Montagem de larguras de coluna[editar | editar código-fonte]

Para forçar a largura das colunas para os requisitos específicos, em vez de aceitar a largura do elemento de texto mais amplo em células de uma coluna, siga este exemplo. Note que o envolver (wrap-around) do texto é forçado.

O código de marcação wiki:

{| border="1" cellpadding="2" 
! scope="col" width="50" | Nome 
! scope="col" width="225" | Efeito 
! scope="col" width="225" | Jogos encontrados em 
|- 
| Pokebol || regular Pokébol || Todas as versões 
|- 
| Great Ball || Melhor do que um Pokebol || Todas as versões 
|} 
Nome Efeito Jogos encontrados em
Pokebol Pokebol Regular

Todas as versões |

Great Ball Melhor do que um Pokebol Todas as versões

Para definir a largura das colunas de uma tabela sem cabeçalhos, especificar a largura na primeira célula para cada coluna, como esta:

{| border="1" cellpadding="2" 
|- 
| width="100pt" | Esta coluna é de 100 pontos de largura 
| width="200pt" | Esta coluna é de 200 pontos de largura 
| width="300pt" | Esta coluna é de 300 pontos de largura 
|- 
| blah || blih || bluh 
|} 
Esta coluna é de 100 pontos de largura Esta coluna é de 200 pontos de largura Esta coluna é de 300 pontos de largura
blah blih bluh

Uma aplicação de definir as larguras é alinhar colunas de tabelas consecutivas:

País Capital
Países Baixos Amsterdam
País Capital
França Paris
Não Enrolar[editar | editar código-fonte]

Em uma tabela que se estende por toda a largura da página, células mais estreitas que as células mais largas tendem a se enrolar. Para manter uma coluna inteira fora de enrolamento, use style=white-space:nowrap em uma célula não-titular na célula maior/mais longa / para afetar a coluna inteira.

Antes:

Episódio Data Resumo
"A Jornada Começa" 01 de janeiro de 2010 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"Quando Episódios Atacam" 08 de janeiro de 2010 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut labore incididunt et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"So Long" 15 de janeiro de 2010 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Depois:

Episode Data Resumo
"A Jornada Começa" 01 de janeiro de 2010 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"When Episodes Attack" 08 de janeiro de 2010 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"So Long" 15 de janeiro de 2010 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Tabelas com atributos HTML e estilos CSS[editar | editar código-fonte]

Atributos de estilo CSS podem ser adicionado com ou sem outros atributos HTML

style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"

Laranja Maçã
Pão Torta
Manteiga Sorvete
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1" 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 

Desdobramento de tabelas[editar | editar código-fonte]

Algumas tabelas contêm dados suficientes que não se encaixam no espaço alocado esquerda para a direita. Para criar uma tabela que se desdobre da esquerda para a direita, coloque a tabela dentro de códigos.div

Título 1
Título 2
Título 3
Título 4
Título 5
Título 6
Título 7
Título 8
Título 9
Título 10
Dados 1
Dados 2
Dados 3
dados 4
dados 5
dados 6
dados 7
dados 8
dados 9
dados 10


<div style="border: 2px solid rgb(221, 221, 221); overflow-y: hidden; overflow-x: auto; 
padding: 0.2em; width: 99%;" id="imageContainer"> 
{| cellspacing="1" cellpadding="10" border="1" width="1000" 
|- 
| Título 1<br> 
| Título 2<br> 
| Título 3<br> 
| Título 4<br> 
| Título 5<br> 
| Título 6<br> 
| Título 7<br> 
| Título 8<br> 
| Título 9<br> 
| Título 10<br> 
|- 
| dados 1<br> 
| dados 2<br> 
| dados 3<br> 
| dados 4<br> 
| dados 5<br> 
| dados 6<br> 
| dados 7<br> 
| dados 8<br> 
| dados 9<br> 
| dados 10<br> 
|} 
</ Div> 


Tabela com Títulos TH[editar | editar código-fonte]

TH (títulos de tabela HTML) podem ser criados usando ! em vez de |. Títulos geralmente aparecem em negrito e centralizado padronizados.

Principais posições[editar | editar código-fonte]

"Cada coluna"

Gostoso Mais Gostoso
Laranja Maçã
Pão Torta
Manteiga Sorvete
{| border="1" cellpadding="20" cellspacing="0" 
! Gostoso 
! Mais Gostoso 
|- 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 

Colspan="2"

Gostosos
Laranja Maçã
Pão Torta
Manteiga Sorvete
{| border="1" cellpadding="20" cellspacing="0" 
! colspan="2" | Gostosos 
|- 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 

Títulos laterais[editar | editar código-fonte]

Default

Fruta Laranja Maçã
Prato Pão Torta
Complemento Manteiga Sorvete
{| border="1" cellpadding="20" cellspacing="0" 
! Fruta 
| Laranja 
| Maçã 
|- 
! Prato 
| Pão 
| Torta 
|- 
! Complemento 
| Manteiga 
| Sorvete 
|} 

"'Justificar direito'"

Certos títulos laterais justificados podem ser feitos da seguinte forma

Fruta Laranja Maçã
Prato Pão Torta
Complemento Manteiga Sorvete
{| border="1" cellpadding="20" cellspacing="0" 
! align="right" | Fruta 
| Laranja 
| Maçã 
|- 
! align="right" | Prato 
| Pão 
| Torta 
|- 
! align="right" | Complemento 
| Manteiga 
| Sorvete 
|} 

Legenda[editar | editar código-fonte]

Uma legenda de tabela pode ser adicionada no topo de qualquer tabela como se segue

+ Complementos alimentares
Laranja Maçã
Pão Torta
Manteiga Sorvete
{| border="1" cellpadding="20" cellspacing="0" 
| + Complementos alimentares 
|- 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 

Os atributos podem ser adicionados à legenda como se segue

+ "Complementos alimentares"
Laranja Maçã
Pão Torta
Manteiga Sorvete
{| border="1" cellpadding="20" cellspacing="0" 
| + align="bottom" style="color:#e76700;"|''Complementos alimentares'' 
|- 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 

Classificar[editar | editar código-fonte]

As tabelas podem ser classificáveis ​​adicionando class="sortable"; para mais detalhes veja "Help: Sorting". Uma vez que isto pode ser muito útil, é aconselhável manter as possibilidades e as limitações desse recurso em mente ao projetar uma tabela. Por exemplo

  • Não dividir uma tabela em seções por subtítulos abrangendo várias linhas. Em vez disso, uma coluna extra pode ser feita mostrando o conteúdo destes cabeçalhos/títulos em cada fileira, de forma resumida.
  • Não têm elementos que abrangem várias colunas; em vez disso, mais uma vez, repetir o conteúdo de cada fileira, em uma forma abreviada.
  • Em uma coluna de números, não coloque o texto como "ca." na frente de um número - irá classificar como zero. Não coloque texto após o número, e não colocar um intervalo de números (que não afeta a posição de classificação para o modo de ordenação numérica e, no caso de um intervalo, o primeiro número determina a posição, mas se, possivelmente, após separação esta ou outra coluna, o elemento é, na parte superior, que vai induzir o modo de triagem alfabética). Em vez disso, coloque estes textos em uma coluna separada. Alternativamente, para a maior flexibilidade, o modo de triagem alfabética com as chaves de triagem (SORTKEYS) ocultas podem ser utilizadas.

Uma longa forma de conteúdo abreviado pode ser colocado como legenda fora da tabela.

"Marcação Wiki"

{| class="sortable" border="1" 
| + "Tabela Classificável" 
|- 
! Alfabética !! Numérica !! Data !! class="unsortable" | Inclassificável 
|- 
| d || 2 || 2008-11-24 || Este 
|- 
| b || 8 || 2004-03-01 || coluna 
|- 
| a || 6 || 1979-07-23 || não pode 
|- 
| c || 4 || 1492-12-08 || ser 
|- 
| e || 0 || 1601-08-13 || ordenadas/classificadas. 
|} 

"O que se parece no seu navegador"

+ "Tabela Classificável"
Alfabética Numérica Data Unsortable
d 2 2008-11-24 Esta
b 8 2004-03-01 Coluna
a 6 1979-07-23 Não pode
c 4 1492-12-08 ser
e 0 1601-08-13 classificada.

Tabela com cabeçalhos H1, H2, H3, etc.[editar | editar código-fonte]

HTML H1, H2, H3, H4, etc. cabeçalhos podem ser criados a maneira padrão de marcação wiki com == sinais de igual == e devem estar em uma linha por si mesmos para funcionar.

Visualize a tabela inteira. Se você clica em uma aba de edição de um título "dentro" de uma tabela, edita e pré-visualiza, a tabela pai exibirá erroneamente quebrada, porque parte dela vai estar ausente.

Mantenha a hierarquia de títulos coerente com o resto da página para que a tabela de conteúdos na página de topo funcione corretamente.

Mais Gostoso[editar | editar código-fonte]

Laranja Maçã
Pão Torta
Manteiga Sorvete
{| border="3" cellpadding="20" cellspacing="0" 
| colspan="2" | 
=== O Mais Gostoso === 
|- 
| Laranja 
| Maçã 
|- 
| Pão 
| Torta 
|- 
| Manteiga 
| Sorvete 
|} 



Dicas[editar | editar código-fonte]

Para mesclar ou selecionar as células pressione a tecla "CTRL" enquanto clica nas células.

Uma boa maneira de formatar uma tabela seria algo do formulário:

{| width="x%" border="1" cellspacing="0" style="margin: 1em auto;"

mas você também pode adicionar:

cellpadding="4"

se você queria mais espaço em branco ao redor do texto dentro de cada célula.

Lembre-se que nem sempre você tem que definir a largura de 100%. Esta pode ser uma irritação quando a tabela contém apenas pequenas quantidades de dados, mas é forçado a se esticar para caber na tela inteira:

cabeçalho à esquerda cabeçalho à direita
um dois
três quatro

mas

cabeçalho à esquerda cabeçalho à direita
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Você pode, claro, deixar a largura fora e deixar o sistema decidir, mas isso pode resultar em tabelas ficando muito estreitas!

A melhor solução é "tentativa e erro". Continue usando o botão "Mostrar previsão" e ver como ela se parece?

Limitação[editar | editar código-fonte]

"Números negativos"

Valor negativo sinal de menos pode quebrar sua tabela (ela pode exibir alguns valores em falta), se você começar uma célula em uma nova linha com um número negativo ou um parâmetro que avalia para um número negativo (| -6), porque essa é a marcação wiki para linha da tabela, não célula da tabela. Para evitar isso, insira um espaço antes do valor (| -6) ou use a marcação de células in-line (|| -6).

Ver também[editar | editar código-fonte]