Ajuda: Tabelas

Da Wikipédia, a enciclopédia livre.
Ir para a navegação Ir para a pesquisa
Gnome-help.svg - Balcão de Informações

Esta página explica a sintaxe para inserir uma tabela na Wikipedia , usando a marcação wiki .

Existem algumas ferramentas para gerar tabelas automaticamente. Para um guia completo de tabelas (em inglês), consulte m: Help: Table .

Observe que os modelos sinópticos e os modelos de navegação são casos especiais de tabelas com suas próprias classes e métodos de criação, para os quais nos referimos às páginas relativas.

A seguir, mostramos em detalhes como construir uma mesa.

Resumo

A marcação de uma tabela pode ser resumida na seguinte legenda:

 {|
Começo da mesa
 | +
legenda da tabela, opcional , pode ser colocada apenas entre o início da tabela e a primeira linha da tabela
 | -
linha da tabela , opcional na primeira linha - MediaWiki assume que a primeira linha existe
 !
célula de cabeçalho , opcional (cinza mais escuro). Títulos consecutivos podem estar na mesma linha separados por pontos de exclamação duplos ( !! ).
 |
conteúdo da tabela , obrigatório ! Células consecutivas podem ser adicionadas na mesma linha separadas por barras verticais duplas ( || ) ou iniciadas em novas linhas, cada uma começando com uma barra vertical ( | ).
 |}
Fim da mesa

Comandos básicos

Para facilitar a explicação da sintaxe, vamos considerar a seguinte tabela de exemplo:

Linha 1, célula 1 Linha 1, célula 2 Linha 1, célula 3
Linha 2, célula 1 Linha 2, célula 2 Linha 2, célula 3

e vamos ver passo a passo como construí-lo.

Crie uma tabela padrão

Primeiro, definimos a tabela usando {| e |} para indicar o início e o fim. Esses símbolos devem estar em linhas separadas :

 {|

|}

Todo o código que descreve a aparência da tabela (por exemplo, o número de linhas e colunas) deve ser inserido nas linhas entre os símbolos anteriores. Na maioria dos casos, para dar à tabela uma aparência gráfica padrão, o seguinte texto é adicionado:

 {| classe = "wikitable"

|}

Para uma explicação detalhada de seu significado, consulte a seção Atributos .

Adicionando novas linhas

Para iniciar uma nova linha, escreva |- no início de uma nova linha . Para adicionar uma célula na linha recém-definida, escreva | , sempre em uma nova linha , seguido pelo texto que você deseja inserir na célula:

 {|
| -
| Linha 1, célula 1
| -
| Linha 2, célula 1
|}

Como |- é opcional para a primeira linha, o código acima pode ser reescrito assim:

 {|
| Linha 1, célula 1
| -
| Linha 2, célula 1
|}

Adicionando várias células na mesma linha

Existem duas maneiras de adicionar várias células à mesma linha : para cada célula a ser adicionada à linha, escreva || na mesma linha da célula anterior, seguida pelo texto para aparecer na nova célula, ou inicie uma nova linha com | , sempre seguido do texto a ser inserido na célula:

 {|
| Linha 1, célula 1 || Linha 1, célula 2 || Linha 1, célula 3
| -
| Linha 2, célula 1
| Linha 2, célula 2
| Linha 2, célula 3
|}

Em outras palavras, cada célula é definida envolvendo e escrevendo | , ou permanecendo na mesma linha da célula anterior e escrevendo || . Os espaços antes e depois das barras verticais | eles são ignorados e, portanto, podem ser omitidos, mas, se usados, tornam o código mais compreensível e mais fácil de modificar.

Adicionando células de cabeçalho

Suponha que queremos transformar as três células da primeira linha da tabela em células de cabeçalho: para fazer isso, basta substituir as barras verticais | com tantos pontos de exclamação ! . A sintaxe é idêntica: a primeira célula do cabeçalho é definida iniciando uma nova linha com um ! seguido pelo texto que você deseja inserir naquela célula, enquanto as células de cabeçalho subsequentes (que estão na mesma linha) são obtidas escrevendo duas !! na mesma linha , ou apenas um ! em novas linhas . Portanto seja

 {|
! Cabeçalho 1 !! Cabeçalho 2 !! Título 3
| -
| Linha 2, célula 1 || Linha 2, célula 2 || Linha 2, célula 3
|}

é

 {|
! Cabeçalho 1
! Cabeçalho 2
! Título 3
| -
| Linha 2, célula 1 || Linha 2, célula 2 || Linha 2, célula 3
|}

produzir o mesmo resultado, isto é

Cabeçalho 1 Cabeçalho 2 Título 3
Linha 2, célula 1 Linha 2, célula 2 Linha 2, célula 3

As células de cabeçalho também podem ser adicionadas ao início de cada linha; por exemplo, o código

 {| classe = "wikitable"
! !! Cabeçalho da coluna 2 !! Cabeçalho da coluna 3
| -
! Cabeçalho da linha 2
| Linha 2, célula 2 || Linha 2, célula 3
| -
! Cabeçalho da linha 3
| Linha 3, célula 2 || Linha 3, célula 3
|}

gera

Cabeçalho da coluna 2 Cabeçalho da coluna 3
Cabeçalho da linha 2 Linha 2, célula 2 Linha 2, célula 3
Cabeçalho da linha 3 Linha 3, célula 2 Linha 3, célula 3

Mas tenha cuidado: se você escrever

 {| classe = "wikitable"
! !! Cabeçalho da coluna 2 !! Cabeçalho da coluna 3
| -
! Cabeçalho da linha 2 || Linha 2, célula 2 || Linha 2, célula 3
| -
! Cabeçalho da linha 3 || Linha 3, célula 2 || Linha 3, célula 3
|}

ou seja, misturando na mesma linha ! e | , como resultado, obtemos

Cabeçalho da coluna 2 Cabeçalho da coluna 3
Cabeçalho da linha 2 Linha 2, célula 2 Linha 2, célula 3
Cabeçalho da linha 3 Linha 3, célula 2 Linha 3, célula 3

que não corresponde ao que você deseja.

Adicionando um título

Para adicionar um título à tabela, deve-se escrever |+ seguido do título que deseja dar, lembrando-se de inserir |+ imediatamente abaixo {| :

 {| classe = "wikitable"
| + Título da tabela
! Cabeçalho 1 !! Cabeçalho 2 !! Título 3
| -
| Linha 2, célula 1 || Linha 2, célula 2 || Linha 2, célula 3
|}

O resultado é o seguinte:

Título da mesa
Cabeçalho 1 Cabeçalho 2 Título 3
Linha 2, célula 1 Linha 2, célula 2 Linha 2, célula 3

Inserir wikitexto em uma célula

Nas tabelas, é possível formatar o texto usando a sintaxe normal da Wikipedia, por exemplo, escrevendo palavras em itálico ou adicionando wikilinks. Para envolver dentro de uma célula, você pode usar a tag <br /> :

 {| classe = "wikitable"
| Uma célula com um [[Help: Wikilink | wikilink]]. || Uma palavra em '' itálico '' na célula.
| -
| Uma célula com <br /> algum texto escrito <br /> em várias linhas.
| Uma célula com um [[Help: Wikilink | wikilink]], <br /> uma palavra em '' itálico '' e <br /> o texto escrito em várias linhas.
|}
Uma célula com wikilink . Uma palavra em itálico na célula.
Um celular com
do texto escrito
em várias linhas.
Uma célula com wikilink ,
uma palavra em itálico e
o texto escrito em várias linhas.

Se você precisar inserir elementos em uma célula cuja sintaxe requer que eles comecem no início de uma nova linha, como listas ou tabelas numeradas e com marcadores (é de fato possível inserir uma tabela dentro de outra tabela), para exibi-los corretamente , é necessário ir à cabeça após o | :

 {| classe = "wikitable"
| Um celular com
* uma lista
* apontou
dentro.
| * Este asterisco não é interpretado como uma lista com marcadores porque não começa em uma nova linha.
# Em vez disso, esses hashs são interpretados como uma lista numerada
# porque estão no início da linha.
| -
|
{| classe = "wikitable"
| Tabela || aninhado
| -
| dentro || o outro.
|}
Aqui estamos fora da mesa interna <br /> e dentro da célula da mesa externa.
|
* Uma lista
* # aposta mista
* # para uma lista
* numerado.
|}
Um celular com
  • uma lista
  • pontiagudo

dentro.

* Este asterisco não é interpretado como uma lista com marcadores porque não começa em uma nova linha.
  1. Em vez disso, esses hashs são interpretados como uma lista numerada
  2. porque eles estão no início da linha.
Mesa aninhado
dentro o outro.

Aqui estamos fora da mesa interna
e dentro da célula da tabela externa.

  • Uma lista
    1. aposta mista
    2. para uma lista
  • numerado.

Uso de ! e |

Ao escrever o texto contido em uma tabela, preste atenção nos personagens ! e | , porque é provável que sejam mal interpretados como elementos de marcação. Por exemplo, escrevendo

 {| classe = "wikitable"
| O símbolo "|" é uma barra vertical || Algo errado...
|}

o resultado é

"é uma barra vertical Algo errado...

A razão para este comportamento "estranho" é que a barra entre aspas foi interpretada pelo software como um separador entre os atributos da célula (o texto à esquerda da barra, o Il simbolo " ) e o conteúdo da célula (o texto à direita da barra., " è una barra verticale ).

Existem diferentes métodos para resolver esse tipo de problema. A primeira é usar as <nowiki>Testo</nowiki> : o texto entre elas não é interpretado pelo software, o que é perfeito para o exemplo anterior:

 {| classe = "wikitable"
| O símbolo "<nowiki> | </nowiki>" é uma barra vertical || OK
|}

Agora o resultado está correto:

O símbolo "|" é uma barra vertical OK

Como alternativa, você pode usar a entidade HTML &#124; vez da barra vertical &#124; , enquanto o comando {{!}} não funciona neste caso.

Felizmente, esse problema não surge com wikilinks canalizados , que, portanto, podem ser usados ​​normalmente (seria contraproducente recorrer aos métodos acima).

Problemas semelhantes ocorrem quando você precisa escrever dois pontos de exclamação em uma linha em uma célula de cabeçalho, mas os métodos para resolvê-los são os mesmos: coloque os pontos de exclamação em tags <nowiki> ou substitua-os pela entidade &#33; :

 {| classe = "wikitable"
| + [[Factorial]] vs semifatorial
! '' n '' !! '' n ''! !! '' n '' & # 33; & # 33;
| -
| 5 || 120 || 15
|}
Fatorial vs semifatorial
n n ! n !!
5 120 15

Atributos

Qualquer elemento usado para a construção de tabelas ( {| , |+ , |- , ! , !! , | e || ), exceto |} , pode aceitar qualquer atributo HTML que modifique sua aparência: por exemplo, é possível alterar a cor de fundo de uma única célula ou de uma linha inteira. Os atributos HTML são cadeias de texto do formulário attributo =" valore " , em que attributo e valore devem ser substituídos por nomes válidos e reconhecidos. O uso de atributos HTML já foi mostrado nos exemplos anteriores, onde atribuímos o elemento {| o atributo class="wikitable" , que dá à tabela uma aparência gráfica padrão. Na verdade, se este atributo fosse omitido, escrever isso é

 {|
| + Título da tabela
! Cabeçalho 1 !! Cabeçalho 2 !! Título 3
| -
| Linha 2, célula 1 || Linha 2, célula 2 || Linha 2, célula 3
|}

o resultado seria este:

Título da mesa
Cabeçalho 1 Cabeçalho 2 Título 3
Linha 2, célula 1 Linha 2, célula 2 Linha 2, célula 3

Pode-se ver que a mesa agora está transparente e sem bordas.

Atribuir um atributo a um elemento

No caso de {| e |- , um atributo é adicionado simplesmente escrevendo-o à direita destes símbolos:

 {| atributo = " valor "

| - atributo = " valor "

Com |+ ! , !! , | e || em vez disso, é necessário separar os atributos do texto da célula adicionando um | :

 | + atributo = " valor " | Título da mesa

! atributo = " valor " | Célula de cabeçalho !! atributo = " valor " | Célula de cabeçalho

| atributo = " valor " | Texto da célula || atributo = " valor " | Texto da célula

Cada elemento também pode receber mais atributos, separando-os com um espaço:

 | attribute1 = " valor1 " attribute2 = " valor2 " | Texto da célula

O atributo mais usado é style , cuja sintaxe é ligeiramente diferente da mostrada até agora: style=" proprietà : valore ;" , onde proprietà e valore devem ser substituídos por nomes válidos e reconhecidos. Por exemplo, uma propriedade frequentemente usada é color , que é usada para definir a cor do texto, e um valor adequado pode ser red ; portanto, se uma célula for atribuída ao atributo style="color:red;" , o texto dentro dessa célula ficará vermelho. Você também pode usar várias propriedades ao mesmo tempo escrevendo style=" prop1 : valore1 ; prop2 : valore2 ;" e assim por diante. Por exemplo, se além do texto vermelho também quisermos um fundo amarelo, escreveríamos style="color:red; background-color:yellow;" .

Os exemplos a seguir mostram as propriedades mais comumente usadas na construção de tabelas; para listas completas, consulte Propriedades CSS2 ou Referência CSS .

Alterar a cor do texto e do fundo de uma célula

Para alterar a cor do texto, use o style="color: colore ;" , enquanto com style="background-color: colore ;" você define a cor de fundo. Existem vários valores que podem assumir a colore : consulte a página de ajuda sobre as cores .

Exemplo:

 {| classe = "wikitable"
| + estilo = "cor: vermelho;" | Título
! estilo = "cor: verde;" | Cabeçalho 1 !! estilo = "cor: azul;" | Cabeçalho 2 !! Cabeçalho 3
| -
| Célula 1 || estilo = "cor de fundo: amarelo;" | Célula 2 || Célula 3
| -
| Célula 4
| Célula 5
| style = "cor: laranja; cor de fundo: preto;" | Célula 6
| - style = "cor de fundo: ciano;"
| estilo = "cor: branco;" | Célula 7 || Célula 8 || Célula 9
|}

O resultado é:

Título
Cabeçalho 1 Cabeçalho 2 Cabeçalho 3
Célula 1 Célula 2 Célula 3
Célula 4 Célula 5 Célula 6
Célula 7 Célula 8 Célula 9

Células que abrangem várias linhas e / ou colunas

Atribuindo a uma célula (ou seja, os elementos | , || ! E !! ) atributos rowspan=" n " e / ou colspan=" n " , ocupará um número de linhas e / ou colunas igual a n (n é substituído por um número inteiro: 2, 3, ...). Como o número de colunas em uma tabela deve ser o mesmo em todas as linhas, ao usar esses atributos, algumas células não devem ser definidas, como mostram os exemplos a seguir:

 {| classe = "wikitable"
! Linha 1, célula 1 !! Linha 1, célula 2 !! Linha 1, célula 3
| -
| colspan = "2" | Linha 2, células 1 e 2 || Linha 2, célula 3
| -
| Linha 3, célula 1 || colspan = "2" | Linha 3, células 2 e 3
| -
| colspan = "3" | Linha 4, células 1, 2 e 3
|}

Esta tabela tem três colunas, mas na segunda e terceira linhas apenas duas células foram definidas, uma vez que uma delas ocupa o lugar de duas colunas, enquanto na quarta linha apenas uma célula foi definida, uma vez que ela sozinha ocupa o lugar de três colunas :

Linha 1, célula 1 Linha 1, célula 2 Linha 1, célula 3
Linha 2, células 1 e 2 Linha 2, célula 3
Linha 3, célula 1 Linha 3, células 2 e 3
Linha 4, células 1, 2 e 3
 {| classe = "wikitable"
! Linha 1, célula 1 !! Linha 1, célula 2
| -
| rowpan = "2" | Linhas 2 e 3, célula 1 || Linha 2, célula 2
| -
| Linha 3, célula 2
|}

Esta tabela possui duas colunas, mas na terceira linha apenas uma célula foi definida, pois o lugar da outra já está ocupado pela célula superior:

Linha 1, célula 1 Linha 1, célula 2
Linhas 2 e 3, célula 1 Linha 2, célula 2
Linha 3, célula 2
 {| classe = "wikitable"
! Linha 1, célula 1 !! Linha 1, célula 2
| -
| rowpan = "2" | Linhas 2 e 3, célula 1 || Linha 2, célula 2
| -
| Linha 3, célula 2
|}

Exemplos:

1A 2A 3A
1B 2B 3B
1C 2C 3C
1A 2A 3A
1B + 1C 2B 3B
2C 3C
1A 2A 3A
1B 2B + 2C 3B
1C 3C
1A 2A 3A
1B 2B 3B + 3C
1C 2C
 {| classe = "wikitable"
! 1A !! 2A !! 3A
| -
| 1B
| 2B
| 3B
| -
| 1C
| 2C
| 3C
|}

{| classe = "wikitable"
! 1A !! 2A !! 3A
| -
| rowpan = "2" | 1B + 1C
| 2B
| 3B
| -
| 2C
| 3C
|}

{| classe = "wikitable"
! 1A !! 2A !! 3A
| -
| 1B
| rowpan = "2" | 2B + 2C
| 3B
| -
| 1C
| 3C
|}

{| classe = "wikitable"
! 1A !! 2A !! 3A
| -
| 1B
| 2B
| rowpan = "2" | 3B + 3C
| -
| 1C
| 2C
|}

Os atributos rowspan e colspan também podem ser usados ​​simultaneamente na mesma célula:

 {| classe = "wikitable"
! !! Linha 1, célula 2 !! Linha 1, célula 3 !! Linha 1, célula 4
| -
! Linha 2, célula 1
| colspan = "2" rowspan = "3" | Linhas 2, 3 e 4, células 2 e 3 || Linha 2, célula 4
| -
! Linha 3, célula 1
| Linha 3, célula 4
| -
! Linha 4, célula 1
| Linha 4, célula 4
|}

O resultado é:

Linha 1, célula 2 Linha 1, célula 3 Linha 1, célula 4
Linha 2, célula 1 Linhas 2, 3 e 4, células 2 e 3 Linha 2, célula 4
Linha 3, célula 1 Linha 3, célula 4
Linha 4, célula 1 Linha 4, célula 4

Alinhar o texto em uma tabela

Por padrão, o título da tabela e o texto da célula do cabeçalho são alinhados ao centro, enquanto o texto da célula normal é alinhado à esquerda. Para alinhar o texto de uma célula de forma diferente, deve ser atribuído o atributo style="text-align: pos ;" , onde pos ser substituído por left , center , right ou justify para posicionar o texto respectivamente à esquerda, centro, direita da célula ou para justificá-lo.

Exemplo:

 {| classe = estilo "wikitable" = "largura: 100%;"
| + estilo = "alinhar texto: esquerda;" | Título esquerdo
! style = "text-align: left;" | Texto à esquerda !! Texto no centro (padrão) !! style = "text-align: right;" | Texto à direita
| -
| Texto à esquerda (padrão) || style = "text-align: center;" | Texto central || style = "text-align: right;" | Texto à direita
|}

O resultado é (nota: o atributo style="width:100%;" foi atribuído à tabela neste exemplo para fazê-la ocupar toda a largura disponível, com o único propósito de tornar o alinhamento do texto mais evidente):

Título esquerdo
Texto esquerdo Texto central (padrão) Texto à direita
Texto à esquerda (padrão) Texto no centro Texto à direita

O texto em uma célula também é centralizado verticalmente; se você quiser que o texto comece do topo, adicione o style="vertical-align:top;" :

 {| classe = "wikitable"
| Uma célula com <br /> algum texto escrito <br /> em várias linhas.
| Célula com pouco texto.
| style = "vertical-align: top;" | Célula com pouco texto.
|}
Uma célula
com del
texto escrito
em muitos
linhas.
Célula com pouco texto. Célula com pouco texto.

Considere uma tabela em que algumas células contêm muito texto e as outras apenas algumas palavras: as células maiores ocupam a maior parte do espaço, deixando pouco para as outras; como resultado, o texto nessas células tende a quebrar, o que às vezes é um efeito indesejado (se você não vê-lo bem no exemplo a seguir, apenas diminua a largura da janela do navegador):

 {| classe = "wikitable"
| Célula com pouco texto.
| Célula com pouco texto.
| Célula com muito texto: '' [[lorem ipsum]] dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
| -
| Célula com um pouco mais de texto.
| Célula com um pouco mais de texto.
| Célula com muito texto: '' lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
|}
Célula com pouco texto. Célula com pouco texto. Célula com muito texto: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur .
Célula com um pouco mais de texto. Célula com um pouco mais de texto. Célula com muito texto: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur .

Se você deseja evitar style="white-space:nowrap;" texto em uma célula, adicione o style="white-space:nowrap;" ; se este atributo for atribuído à maior célula de uma coluna, o efeito se estende a todas as células dessa coluna. No exemplo a seguir vocêpoderá ver que na primeira coluna o texto não se quebra em nenhuma célula porque o atributo foi atribuído à célula que contém a maior parte do texto, enquanto na segunda coluna o texto na célula abaixo continua a quebrar (de novo , pode ser útil observar o comportamento do texto conforme a largura da janela do navegador muda):

 {| classe = "wikitable"
| Célula com pouco texto.
| estilo = "espaço em branco: nowrap;" | Célula com pouco texto.
| Célula com muito texto: '' lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
| -
| estilo = "espaço em branco: nowrap;" | Célula com um pouco mais de texto.
| Célula com um pouco mais de texto.
| Célula com muito texto: '' lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
|}
Célula com pouco texto. Célula com pouco texto. Célula com muito texto: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur .
Célula com um pouco mais de texto. Célula com um pouco mais de texto. Célula com muito texto: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur .

Ajuste o fluxo do texto em torno de uma mesa

Normalmente, o texto fora de uma tabela (os parágrafos normais da entrada) é organizado acima e abaixo dela (a linha vazia antes e depois da tabela não é necessária, mas torna o código mais claro):

 Texto acima da tabela.

{| classe = "wikitable"
| Célula 1 || Célula 2
| -
| Célula 3 || Célula 4
|}

Texto abaixo da tabela.

Texto acima da tabela.

Célula 1 Célula 2
Célula 3 Célula 4

Texto abaixo da tabela.

No entanto, o texto externo pode ser organizado próximo à tabela atribuindo a ele (a {| ) o atributo class="wikitable floatleft" ou class="wikitable floatright" . No primeiro caso, a tabela é organizada à esquerda da página e o texto à direita; vice-versa, no segundo caso a tabela é colocada à direita e o texto à esquerda. O texto adjacente é aquele que se encontra sob a mesa no wikitexto (isto é, depois de |} ); o texto que precede a tabela (ou seja, {| ) permanece acima dela. Depois de passar pela tabela, o texto voltará a ocupar toda a largura da página.

Exemplo:

 Texto que precede a tabela (aparece acima dela).

{| classe = "flutuação wikitable"
| Célula 1 || Célula 2 || Célula
| -
| Célula 3 || Célula 4 || Célula
|}

O texto escrito daqui em diante aparece ao lado da tabela. Para ver o efeito, é necessário escrever uma frase longa para ocupar algumas linhas: '' [[lorem ipsum]] dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ''. Todo o texto anterior aparece acima da seguinte tabela:

{| class = "wikitable floatleft"
| Célula 1 || Célula 2 || Célula
| -
| Célula 3 || Célula 4 || Célula
|}

enquanto o texto escrito daqui em diante aparece ao lado da mesa. Para ver o efeito, é necessário escrever uma frase longa para ocupar algumas linhas: `` lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ''.

O resultado é:

Texto que precede a tabela (aparece acima dela).
Célula 1 Célula 2 Célula
Célula 3 Célula 4 Célula
O texto escrito daqui em diante aparece ao lado da tabela. Para ver o efeito, é necessário escrever uma frase longa para ocupar algumas linhas: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum . Todo o texto anterior aparece acima da seguinte tabela:
Célula 1 Célula 2 Célula
Célula 3 Célula 4 Célula
enquanto o texto escrito daqui em diante aparece ao lado da mesa. Para ver o efeito, é necessário escrever uma frase longa para ocupar algumas linhas: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum .

Nota: Uma forma alternativa de posicionar uma mesa é atribuindo a {| o style="float: pos ;" , onde pos deve ser substituído por left ou right . O problema é que com este atributo não existe uma margem adequada entre o texto e a tabela. Repetindo o exemplo acima, o resultado é este:

Texto que precede a tabela (aparece acima dela).
Célula 1 Célula 2 Célula
Célula 3 Célula 4 Célula
O texto escrito daqui em diante aparece ao lado da tabela. Para ver o efeito, é necessário escrever uma frase longa para ocupar algumas linhas: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum . Todo o texto anterior aparece acima da seguinte tabela:
Célula 1 Célula 2 Célula
Célula 3 Célula 4 Célula
enquanto o texto escrito daqui em diante aparece ao lado da mesa. Para ver o efeito, é necessário escrever uma frase longa para ocupar algumas linhas: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum .

Tabela no centro da página

Para centralizar uma tabela na página, você precisa atribuir a ela o atributo style="margin-left:auto; margin-right:auto;" . Com referência ao que foi explicado na seção anterior, observe que não é possível rolar o texto à esquerda e à direita de uma tabela centralizada:

 Texto antes da tabela (aparece acima dela).

{| class = estilo "wikitable" = "margin-left: auto; margin-right: auto;"
! Coluna 1 !! Coluna 2
| -
| Linha 1, célula 1 || Linha 1, célula 2
| -
| Linha 2, célula 1 || Linha 2, célula 2
|}

Texto após a tabela (aparece abaixo dela).

Texto antes da tabela (aparece acima dela).

Coluna 1 Coluna 2
Linha 1, célula 1 Linha 1, célula 2
Linha 2, célula 1 Linha 2, célula 2

Texto após a tabela (aparece abaixo dela).

Tabelas classificáveis

Adicionando a instrução class="wikitable sortable" ao topo da tabela, você obterá uma tabela cujas colunas podem ser ordenadas em ordem crescente ou decrescente clicando nos botões que aparecem.

 {| class = "classificável por wikit"
! título !! column1 !! coluna 2 
| -
| linha1 || Florença || 4
| -
| linha2 || Empoli || 4
| -
| linha3 || Domodossola || 1  
| -
| linha4 || Como || 3  
| -
| linha5 || Bolonha || 2  
| -
| linha6 || Ancona || 5  
|}
título coluna1 coluna 2
linha1 Florença 4
linha 2 Empoli 4
linha 3 Domodossola 1
linha 4 Como 3
linha 5 Bolonha 2
linha 6 Ancona 5

Se você clicar em duas ou mais colunas, a última clicada é definida como a chave de classificação primária e as anteriores como secundárias. No exemplo, clicando em coluna1 e depois em coluna2, você obtém uma classificação por coluna2, mas as linhas em que isso é constante (as duas linhas com valor "4") permanecem classificadas por coluna1.
Se, por outro lado, você segurar Shift ao clicar, a coluna clicada é definida como a chave de classificação secundária, mantendo a classificação primária anterior.

A classificação é feita usando JavaScript do lado do cliente, por isso só funciona se o jogador estiver usando um navegador com JavaScript habilitado.

Colunas que não podem ser ordenadas

Se você quiser que uma ou mais colunas da tabela sejam não class="unsortable" | titolo della colonna adicione class="unsortable" | titolo della colonna na linha onde os títulos são escritos.

 {| class = "classificável por wikit"
! título !! column1 !! column2 !! classe = "não classificável" | sem ordem
| -
| linha1 || Como || 2 || coluna
| -
| linha2 || Bolonha || 1 || Não 
| -
| linha3 || Ancona || 3 || encomendável
|}
título coluna1 coluna 2 sem ordem
linha 1 Como 2 coluna
linha 2 Bolonha 1 Não
linha 3 Ancona 3 encomendável

Linhas não classificáveis

Você pode tornar uma linha não classificável, como uma última linha contendo totais, que deve permanecer estacionária. Todas as linhas definidas como cabeçalho (com "!") E colocadas em primeiro ou último estão sempre imóveis. Alternativamente, uma linha, mesmo sem cabeçalho, é mantida na parte inferior se tiver o atributo class="sortbottom" (se a linha não estiver na parte inferior, ela irá para lá assim que o usuário classificar a tabela).

Duas linhas consecutivas podem ser forçadas a permanecer juntas durante a classificação, atribuindo ao segundo o atributo class="expand-child" . Desta forma, a primeira linha será classificada normalmente e a segunda a seguirá.

 {| class = "classificável por wikit"
! título 1
| -
! título 2
| -
| Bolonha
| -
| Ancona
| - class = "expandir filho"
| segunda linha de ancona
| -
| Como
| - classe = "sortbottom"
| pé 1
| -
! pé 2
|}
título 1
título 2
Bolonha
Ancona
segunda linha de ancona
Como
pé 1
pé 2

Tipos de dados

O sistema de classificação reconhece automaticamente o tipo de dados de cada coluna e aplica uma lógica de classificação diferente, com base no conteúdo da primeira caixa não vazia após o cabeçalho. Marcas iniciais e espaços são ignorados. Os tipos identificados automaticamente são:

  • date : possono essere in vari formati come "gg-mm-aaaa", "gg-mm-aa", e "gg mese aaaa", oppure con altri separatori come "/" e "." (sconsigliati, vedi qui ). Non funziona però il simbolo "1º" per il primo del mese, va impostato "1" (vedi capitolo successivo). Non funzionano inoltre le date precedenti al 100 dC
  • valute : riconosciute se iniziano per €, $, £, o ¥; l'ordine è numerico, ignorando i suddetti simboli e altri caratteri alfabetici.
  • numeri : possono essere formati da cifre, virgole, separatori di migliaia, +/- ed E/e (per la notazione scientifica ). Per ottenere il corretto separatore delle migliaia, che su it.wiki è uno spazio speciale, usare formatnum .
  • testo : in tutti gli altri casi l'ordine è semplicemente alfabetico, come indicato in Aiuto:Ordine alfabetico ; le lettere vengono considerate tutte come minuscole.
Numero Testo Data Valuta
1 345 EEE 02-02-2004 € 5,00
22 ddd 13.apr.2005 € 30
-3 CCC 17 agosto 2006 € 6,50
0,44 bbb 1/Gen/2005 € 14,20
0,44E+8 AAA 05/12/2006 € 7,15

Se il riconoscimento automatico non bastasse, il tipo di dato di ogni colonna si può anche indicare esplicitamente. All'intestazione della colonna si può aggiungere il parametro data-sort-type="..." con uno dei seguenti valori:

  • text (testo)
  • number (numeri)
  • date (date)
  • time (orari, con ":" come separatore tra ore minuti e secondi opzionali)
  • isoDate (date in formato ISO, ovvero aaaa-mm-gg)
  • currency (valute)
  • IPAddress (indirizzi IP)
  • url (indirizzi URL)

Ad esempio:

 {| class="wikitable sortable"
! data-sort-type="date" | Data
! data-sort-type="time" | Ora
...

Come impostare manualmente l'ordine

Laddove necessario, si può impostare manualmente l'ordine voluto (ciò è particolarmente utile con le colonne che contengono nomi e cognomi di persone, che verrebbero ordinate seguendo l'ordine alfabetico dei nomi e non dei cognomi). Per impostare una chiave di ordinamento diversa dal contenuto visibile, a ciascuna casella si può aggiungere il parametro data-sort-value="..." in questo modo:

 {| class="wikitable sortable"
! Nome
|-
| data-sort-value="Rossi Mario" | Mario Rossi
|-
| data-sort-value="Bianchi Lucia" | Lucia Bianchi
|-
| data-sort-value="Verdi Anna" | Anna Verdi
|}
Nome
Mario Rossi
Lucia Bianchi
Anna Verdi

Un altro metodo, sconsigliato ma ancora molto usato perché in passato era l'unico, è inserire del testo invisibile direttamente nella casella, in questo modo:

 | <span style="display:none">Rossi Mario</span> Mario Rossi

Venivano usati anche alcuni template appositi (vedi Template:Sort ei template ad esso correlati) oggi obsoleti, la cui funzione era quella di ordinare le colonne ordinabili incapsulando questa tecnica, senza utilizzare direttamente l'HTML.

Raccomandazioni

Nell'inserire immagini e tabelle , tieni conto sia della resa grafica (pensa ai tanti utenti che usano basse risoluzioni video), sia del peso complessivo della pagina (molti utenti hanno infatti sistemi non recentissimi e possono usare connessioni lente).
Prova a vedere come appare la pagina anche a bassa risoluzione (ad esempio 800x600 o 1024x768) e non eccedere col peso delle immagini; non impostare le dimensioni delle immagini di tipo thumb se non è strettamente necessario: lascia che abbiano la larghezza di default scelta dall'utente .
Verifica poi che la pagina non debba essere scorsa orizzontalmente o che parti di essa non si sovrappongano.
Inoltre, assicurati che il contenuto sia sempre accessibile anche quando le immagini non possono essere visualizzate .
Globo di lettere

Corrispondenza tra wikitesto e codice HTML

Per chi conosce il linguaggio HTML , può essere utile fare un confronto tra il wikitesto usato su Wikipedia per la creazione delle tabelle e il relativo codice HTML.

Una tabella è definita da

 {| attributi

|}

che in HTML corrisponde a

 <table attributi >

</table>

Il titolo della tabella, più eventuali attributi, si ottiene con |+ attributi |Titolo che corrisponde a <caption attributi >Titolo</caption> .

Per definire una riga della tabella, insieme agli eventuali attributi, si usa |- attributi , equivalente a <tr attributi > . Il tag si chiude automaticamente all'inizio di una nuova riga o alla chiusura della tabella.

Le celle d'intestazione, compresi gli eventuali attributi, si ottengono scrivendo

 ! Header 1
! attributi | Header 2
! Header 3

oppure

 ! Header 1 !! attributi | Header 2 !! Header 3

Entrambi le forme equivalgono a

 <th>Header 1</th>
<th attributi >Header 2</th>
<th>Header 3</th>

In modo simile, le celle di una riga, con gli eventuali attributi, si definiscono tramite i comandi

 | Cella 1
| attributi | Cella 2
| Cella 3

o equivalentemente così:

 | Cella 1 || attributi | Cella 2 || Cella 3

Entrambi i casi corrispondono in HTML a

 <td>Cella 1</td>
<td attributi >Cella 2</td>
<td>Cella 3</td>

Di seguito si riporta un esempio riassuntivo:

 {| class="wikitable"
|+ style="color:red;" | Titolo
! Header 1 !! Header 2 !! style="color:green;" | Header 3
|-
| Cella 1 || style="color:blue;" | Cella 2 || Cella 3
|- style="background-color:yellow;"
| style="color:orange;" | Cella 4
| Cella 5
| Cella 6
|}

Il risultato è:

Titolo
Header 1 Header 2 Header 3
Cella 1 Cella 2 Cella 3
Cella 4 Cella 5 Cella 6

e corrisponde in HTML a:

 <table class="wikitable">
  <caption style="color:red;">Titolo</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th style="color:green;">Header 3</th>
  </tr>
  <tr>
    <td>Cella 1</td>
    <td style="color:blue;">Cella 2</td>
    <td>Cella 3</td>
  </tr>
  <tr style="background-color:yellow;">
    <td style="color:orange;">Cella 4</td>
    <td>Cella 5</td>
    <td>Cella 6</td>
  </tr>
</table>

Tecniche avanzate

Vedi Aiuto:Tabelle/Avanzate per utilizzi molto particolari: tabelle annidate, tabelle non rettangolari, grafici.

Pagine correlate