STI:MediaWiki:Ajuda:Tabelas

Tabelas

Uma tabela é construída linha por linha, coluna por coluna, ou seja, define-se, para cada linha, as suas colunas (células).

Resumo dos elementos wiki de construção de tabelas Tag Descrição {| Para iniciar uma tabela, obrigatório. |+ Para definir uma legenda ou título para a tabela e explicar o seu uso (opcional). Só pode ser colocado entre o início da tabela e a primeira linha da tabela. |- Para iniciar uma linha da tabela, opcional na primeira linha -- a wiki assume a primeira linha mesmo sem este elemento. | Cada linha de células que servem de cabeçalhos das colunas, opcional. Os cabeçalhos das colunas podem ser colocados consecutivamente, separados por dois pontos de exclamação (!!) , ou colocados um por linha, cada linha começada por um ponto de exclamação (!) . | Cada célula de cabeçalho linha de células com os dados da tabela, opcional! Células consecutivas de dados de tabela podem ser colocadas numa só linha, separadas por duas barras verticais (||) , ou uma por linha, com cada linha começada por uma barra vertical (|) . |} Para concluir a tabela, obrigatório.

Lembre-se:

• Os elementos de construção de tabelas têm de começar numa linha nova, exceto os sinais duplos (||) e (!!) para opcionalmente adicionar elementos consecutivos numa só linha. No entanto, espaços em branco no início da linha são ignorados.

• Cada elemento, exceto o final da tabela, opcionalmente aceita um ou mais atributos HTML. Os atributos têm de estar na mesma linha que o elemento. Separe os atributos entre si com um só espaço.
• As células e títulos (| ou ||, ! ou !!, e |+) têm conteúdo. Por isso, separe os atributos do conteúdo usando uma só barra vertical (|). O conteúdo da célula pode ser colocado na mesma linha ou nas linhas seguintes.
• Os elementos da tabela e das linhas ({| e |-) não têm conteúdo. Não coloque a barra vertical (|) após os atributos opcionais. Se colocar, por erro, uma barra vertical depois dos atributos de um elemento de tabela ou de linha, o analisador sintático apaga a barra vertical e o último atributo se este estiver encostado na barra vertical!

• Conteúdo pode:

(a) seguir seu elemento de célula na mesma linha após quaisquer atributos HTML opcionais ou

(b) em linhas abaixo do elemento de célula. Conteúdo que usa elementos wiki que precisam começar em uma nova linha, como listas, cabeçalhos, ou tabelas aninhadas, deve estar em sua própria nova linha.

• Para inserir um caractere de barra vertical (|) em uma tabela, use o elemento wiki |

(barra vertical).

Em alguns casos pode ser necessário criar uma tabela utilizando a linguagem de marcação HTML diretamente (geralmente ao lidar com predefinições complexas), o que exige certa familiaridade com essa linguagem ou com algum editor de HTML (de preferência um que não crie tabelas poluídas e cheias de estilização). Se quiser, posteriormente, convertê-las para a sintaxe simplificada do MediaWiki, existem algumas ferramentas disponíveis para isso (como este conversor de HTML para wiki, por exemplo), bem como robôs a fazer a conversão, pelo que não é estritamente necessário (com efeito, uma parte da linguagem wiki usada pelo MediaWiki é similar ao HTML).

Por fim, é possível formatar cada uma das linhas ou células individualmente. Os parâmetros são adicionados imediatamente a seguir às marcações de abertura de linha, coluna, legenda ou tabela: a sintaxe é a mesma dos atributos existentes em HTML, mas isto foge do objetivo deste guia. Porém, como referência, aqui fica:

• Para a tabela: {| class="wikitable"

• Para uma linha da tabela
  |+ style="text-align: right;"
• Para uma das células de dados:
  | style="text-align: center;" | texto

A seguir é apresentada uma tabela pequena (fictícia) em que são utilizados alguns dos elementos citados anteriormente.

Você digita	O resultado é
{| class="wikitable" style="width: 50%;" |+ Tabela 1 - Exemplo |- | ! 1 ! 2 |- ! 1 | style="text-align: right;" | alinhado à direita | 1,2 |- ! 2 | style="text-align: center;" | centrado | style="background: #FFFFE6;" | fundo amarelado |}	Tabela 1 - Exemplo   1 2 1 alinhado à direita 1,2 2 centrado fundo amarelado

O próximo exemplo (um pouco mais complexo) mostra algumas outras alterações possíveis em uma tabela.

Você digita	O resultado é
{| class="wikitable" style="width: 100%; text-align: center;" |+ style="font-style: italic;"| Tabela 2 – Estatísticas de ... |- ! a !! b !! c !! d !! e |- | 1 || 2 || 3 || 4 || 5 |- | 6 || 7 || 8 || 9 || 10 |- | 11 || 12 || 13 || 14 || 15 |}	Tabela 2 – Estatísticas de ... a b c d e 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Explicação de cada linha de código:

• Linha 1: início da tabela, juntamente com alguns atributos HTML:
  • A classe "wikitable" especifica a maior parte dos estilos da tabela, como as bordas e cores utilizadas;
  • Por meio do atributo "style" foram especificados redefinidos alguns aspectos:
    • width: 100%: especifica a largura da tabela (100% da largura útil do artigo);
    • text-align: center: é o alinhamento horizontal da tabela;
• Linha 2: legenda da tabela. Desta há uma barra vertical que a separa da definição do estilo (texto itálico);
• Linhas 3, 5, 7 e 9: indicam o início de uma nova linha. As células correspondentes são definidas na linha seguinte;
• Linhas 4, 6, 8 e 10: contém os dados das células das linhas correspondentes. A separação é feita por meio de exclamações duplas (!!), no caso de células de cabeçalho) e de barras verticais duplas (||), no caso de células de dados.
• Linha 11: terminador da tabela.

Outros estilos e atributos básicos

A tabela a seguir não possui bordas e um bom espaçamento mas mostra a estrutura mais simples com o elemento tabela.

Você digita	O resultado é
{| |Laranja |Maçã |- |Pão |Torta |- |Manteiga |Sorvete |}	Laranja Maçã Pão Torta Manteiga Sorvete

Você também pode inserir textos mais longos ou sintaxe wiki mais complexa dentro de tabelas.

Você digita

O resultado é

{| |Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | * Lorem ipsum dolor sit amet * consetetur sadipscing elitr * sed diam nonumy eirmod tempor invidunt |}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor inviduntut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo doloreset ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsumdolor sit amet. Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt

class="wikitable"

Estilização básica (cor de fundo cinza claro, bordas, preenchimento e alinhamento à esquerda) pode ser obtida adicionando class="wikitable".

Você digita	O resultado é
{| |Laranja |Maçã |- |Pão |Torta |- |Manteiga |Sorvete |}	Laranja Maçã Pão Torta Manteiga Sorvete

colspan e rowspan HTML

Você pode usar os atributos HTML colspan e rowspan em células para criar um layout avançado.

Você digita	O resultado é
{| class="wikitable" !colspan="6"|Lista de Compras |- |rowspan="2"|Pão & Manteiga |Torta |Bolo |Folhado |colspan="2"|Croissant |- |Queijo |colspan="2"|Sorvete |Manteiga |Iogurte |}	Lista de Compras Pão & Manteiga Torta Bolo Folhado Croissant Queijo Sorvete Manteiga Iogurte

Às vezes, é desejável (como em uma tabela feita predominantemente de números) girar o texto de forma que ele prossiga de cima para baixo ou de baixo para cima, em vez de da esquerda para a direita ou da direita para a esquerda. Atualmente, o suporte a navegadores para esse tipo de estilo como um componente de HTML ou CSS é esporádico (o Internet Explorer é um dos poucos navegadores que suportam isso em folhas de estilo em cascata, embora de maneira não padrão). Uma solução alternativa que funciona na maioria, senão em todos os navegadores, é usar imagens no lugar do texto.

Atributos HTML

Você pode adicionar atributos HTML à tabelas. Para consultar a fonte oficial, veja a página sobre tabelas da Especificação HTML da W3C

Atributos em tabelas

Inserir atributos após o elemento de início da tabela ({|) aplica estes atributos para a tabela inteira.

Você digita	O resultado é
{| class="wikitable" style="text-align: center; color: green;" |Laranja |Maçã |12,333.00 |- |Pão |Torta |500.00 |- |Manteiga |Sorvete |1.00 |}	Laranja Maçã 12,333.00 Pão Torta 500.00 Manteiga Sorvete 1.00

Atributos em células

Você pode colocar atributos em células individuais. Por exemplo, números podem ficar melhores alinhados à direita.

Você digita	O resultado é
{| class="wikitable" | Laranja | Maçã | style="text-align:right;" | 12,333.00 |- | Pão | Torta | style="text-align:right;" | 500.00 |- | Manteiga | Sorvete | style="text-align:right;" | 1.00 |}	Laranja Maçã 12,333.00 Pão Torta 500.00 Manteiga Sorvete 1.00

Você também pode usar atributos em células quando listar múltiplas células em uma única linha. Note que células são separadas por || , e dentro de cada célula o(s) atriuto(s) e valor(es) são separados por | .

Você digita	O resultado é
{| class="wikitable" | Laranja || Maçã || style="text-align:center;" | 12,333.00 |- | Pão || Torta || style="text-align:center;" | 500.00 |- | Manteiga || Sorvete || style="text-align:center;" | 1.00 |}	Laranja Maçã 12,333.00 Pão Torta 500.00 Manteiga Sorvete 1.00

Atributos em linhas

Você pode inserir atributos em linhas também.

Você digita	O resultado é
{| class="wikitable" | Laranja | Maçã | style="text-align:right;"| 12,333.00 |- | Pão | Torta | style="text-align:right;"| 500.00 |- style="font-style: italic; color: green;" | Manteiga | Sorvete | style="text-align:left;"| 1.00 |}	Laranja Maçã 12,333.00 Pão Torta 500.00 Manteiga Sorvete 1.00

Outras TAG HTML

• Sem borda de tabela: border="0"
• Com borda de tabela de n pixel: border="n"
• Com borda colapsada: style="border-collapse:collapse"
• Com largura n da borda: style="border-style: solid; border-width: npx"
• Cellpadding: Distância entre a “borda” da célula até o seu conteúdo
• Cellspacing: Distância entre as células da tabela
• Com borda arredondada: border-radius, -moz-border-radius, -webkit-border-radius, -khtml-border-radius, -icab-border-radius, -o-border-radius

• Se "border-width:" tem mais do que um número, os quatro número se referem às larguras das bordas superior, direita, inferior, esquerda. Quando houver menos do que quatro números, o valor para a borda esquerda é obtido do valor da borda direita, o valor para a borda inferior é obtido do valor da borda superior, e o valor da borda direita é obtido do valor da borda superior.

Outro método para definir as larguras dos quatro lados de uma célula é usar "border-left", "border-right", "border-top" e "border-bottom":

Você digita	O resultado é
{|style="border-left:solid 10px blu; border-right:solid 20px black; border-top:solid 30px red; border-bottom:solid 40px yellow;" align="center" | Olá |}	Olá

 

* Os atributos HTML (como "width=", "border=", "cellspacing=", "cellpadding=") não precisam de uma unidade de comprimento (a unidade pixel é utilizada por padrão). Eles também são inválidos em HTML 5. As propriedades de estilo CSS (que sobrescrevem os atributos HTML) exigem uma unidade de comprimento explícita (se o valor não for 0) como "px" para pixel.

 

Você digita	O resultado é
{| style="width:100%; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -icab-border-radius: 10px; -o-border-radius: 10px; border: 5px groove #000066;" ! Número ! Letra |- | 1 | A |- | 2 | B |- | 3 | C |}<!-- --> |}	Número Letra 1 A 2 B 3 C

Para tornar a borda de um elemento arredondada, devemos atribuir um valor à propriedade border-radius utilizando uma das estruturas apresentadas:

01. border-radius: valor;

02. border-radius: valor1 valor2;

03. border-radius: valor1 valor2 valor3 valor4

04. border-top-left-radius: valor;

05. border-top-right-radius: valor;

06. border-bottom-left-radius: valor;

07. border-bottom-right-radius: valor;

Com atributos HTML e estilos CSS

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

Você digita	O resultado é
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10" |Laranja |Maçã |- |Pão |Torta |- |Manteiga |Sorvete |}	Laranja Maçã Pão Torta Manteiga Sorvete

Você digita	O resultado é
{| class="wikitable" |+ style="caption-side:left; color:#e76700;"|"Complementos alimentares" |- |Laranja |Maçã |- |Pão |Torta |- |Manteiga |Sorvete |}	"Complementos alimentares" Laranja Maçã Pão Torta Manteiga Sorvete

Largura de coluna

Largura de coluna pode ser adicionada como a seguir.

Você digita	O resultado é
{| style="color: black; background-color: #ffffcc; width: 85%;" | colspan="2" | Essa largura de coluna é 85% da largura da tela (e tem uma cor de fundo) |- | style="width: 30%; background-color: white;"| Essa coluna é 30% dos 85% da largura da tela | style="width: 70%; background-color: orange;"| Essa coluna é 70% dos 85% da largura da tela (e tem uma cor de fundo) |}	Essa largura de coluna é 85% da largura da tela (e tem uma cor de fundo) Essa coluna é 30% dos 85% da largura da tela Essa coluna é 70% dos 85% da largura da tela (e tem uma cor de fundo)

Acessibilidade de células de cabeçalho de tabela

Células de cabeçalho de tabela não especificam explicitamente à quais células de dados de tabela elas se aplicam (aquelas à direita, na mesma linha, ou aquelas abaixo na mesma coluna). Quando a tabela é gerada em um ambiente visual 2D, isso é normalmente fácil de inferir.

No entanto quando tabelas são geradas em mídias não-visuais, você pode ajudar o navegador a determinar qual célula de cabeçalho de tabela se aplica à descrição de qualquer célula selecionada (de forma a repetir seu conteúdo em algum ajudante de acessibilidade) usando um atributo scope="row" ou scope="col" em células de cabeçalho de tabela. Na maioria dos casos com tabelas simples, você usará scope="col" em todas as células de cabeçalho na primeira linha, e scope="row" na primeira célula das linhas seguintes:

Você digita	O resultado é
{| class="wikitable" |- ! scope="col"| Item ! scope="col"| Quantidade ! scope="col"| Preço |- ! scope="row"| Pão | 0.3 kg | $0.65 |- ! scope="row"| Manteiga | 0.125 kg | $1.25 |- ! scope="row" colspan="2"| Total | $1.90 |}	Item Quantidade Preço Pão 0.3 kg $0.65 Manteiga 0.125 kg $1.25 Total $1.90

Alinhamento

Alinhamento de tabelas

Alinhamento de tabelas é obtido usando CSS. O alinhamento de tabelas é controlado por margens. Uma margem fixa em um lado irá fazer que a tabela fique alinhada neste lado, se o lado oposto da margem é definido como "auto". Para ter uma tabela alinhada no centro, você deve definir as duas margens como "auto". Por exemplo, uma tabela alinhada à direita:

Você digita	O resultado é
{| class="wikitable" style="margin-left: auto; margin-right: 0px;" | Laranja | Maçã |- | Pão | Torta |- | Manteiga | Sorvete |}	Laranja Maçã Pão Torta Manteiga Sorvete

Tabela flutuando ao redor do texto

Se você alinhar a tabela à direita ou esquerda da página, o texto que vem depois da tabela começa no fim da tabela, deixando um espaço vazio ao redor da tabela. Você pode fazer o texto ficar ao redor da tabela fazendo a tabela "flutuar" ao redor do texto ao invés de apenas alinhá-la. Isso pode ser obtido usando o atributo CSS float, que pode especificar onde a tabela flutua para o lado direito ou para o esquerdo. Quando usar "float", margens não controlam alinhamento de tabela e podem ser usadas para especificar a margem entre a tabela e o texto em volta.

Você digita

O resultado é

{| class="wikitable" style="float:right; margin-left: 10px;" | Laranja | Maçã |- | Pão | Torta |- | Manteiga | Sorvete |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Laranja Maçã Pão Torta Manteiga Sorvete Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Alinhamento do conteúdo de células

O alinhamento de conteúdo de células pode ser controlado com 2 diferentes propriedades CSS: text-align e vertical-align. text-align pode ser especificado na tabela, linha ou células individuais, enquanto vertical-align só pode ser especificado em linhas e células individuais.

Você digita

O resultado é

{| class="wikitable" |- style="vertical-align:top;" | style="height:100px; width:100px; text-align:left;" | A | style="height:100px; width:100px; text-align:center;" | B | style="height:100px; width:100px; text-align:right;" | C |- style="vertical-align:middle;" | style="height:100px; width:100px; text-align:left;" | D | style="height:100px; width:100px; text-align:center;" | E | style="height:100px; width:100px; text-align:right;" | F |- style="vertical-align:bottom;" | style="height:100px; width:100px; text-align:left;" | G | style="height:100px; width:100px; text-align:center;" | H | style="height:100px; width:100px; text-align:right;" | I |}

A B C D E F G H I

HTML vs MediaWiki

A seguir apresentamos alguns elementos HTML e como eles são formatados para uso na MediaWiki.

Resultado obtido (Publicado)

Codificação

Exemplo de tabela Primeiro cabeçalho Segundo cabeçalho Superior esquerdo   lateral direita inferior esquerdo inferior central Tabela dentro de tabela Dois logos da MediaWiki.

Uma tabela em HTML: <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:MediaWiki.jpg]]</td> <td align="center" width="150px">[[Imagem:MediaWiki.jpg]]</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> Uma tabela em MediaWiki {| 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:MediaWiki.jpg]] | align="center" width="150px" | [[Imagem:MediaWiki.jpg]] |- | 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 MediaWiki. |} |}

Resultado obtido (Publicado)	Codificação
This is a test table here HELLO WORLD followed by this text afterward.	* This is a test table here <table style="border:1px solid black"><tr><td>HELLO WORLD</table> followed by this text afterward.

Ressalvas

Números negativos

Se você iniciar uma célula em uma nova linha com um número negativo com um sinal de menos (ou um parâmetro que resulta em um número negativo), sua tabela pode ficar quebrada, porque os caracteres |- serão interpretados elementos wiki de linha de tabela, e não célula de tabela. Para evitar isso, insira um espaço antes do valor (| -6) ou use elementos de célula in-line (|| -6).

CSS vs atributos

Bordas de tabelas especificadas através de CSS ao invés do atributo de borda serão exibidas incorretamente em um pequeno subconjunto de navegadores de texto.

Atributos comuns para colunas, grupos de colunas e grupos de linhas

A sintaxe da MediaWiki para tabelas, no momento não oferece suporte para especificação de atributos comuns para colunas (com o elemento HTML <col />), grupos de colunas (elemento HTML <colgroup></colgroup>) e grupos de linhas (elementos HTML <thead></thead>, <tbody></tbody> e <tfoot></tfoot>). Esses elementos HTML padrão não são aceitos nem em sua sintaxe HTML ou XHTML.

Todas as linhas e células (cabeçalho e dados) da tabela são gerados dentro de um único grupo implícito de linhas (elemento HTML <tbody></tbody>) sem quaisquer atributos ou estilos.

CSS Alinhamento

A propriedade CSS define a orientação dos caracteres de texto em uma linha. Afeta apenas o texto no modo vertical (quando não é ). É útil para controlar a exibição de linguagens que usam script vertical e também para criar cabeçalhos de tabela verticais.

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

• mixed - Gira os caracteres de scripts horizontais 90° no sentido horário. Estabelece os caracteres de scripts verticais naturalmente. Valor padrão.
• upright - Apresenta os caracteres de scripts horizontais naturalmente (na vertical), bem como os glifos para scripts verticais. Observe que essa palavra-chave faz com que todos os caracteres sejam considerados da esquerda para a direita: o valor usado de direction é forçado a ser ltr.
• sideways - Faz com que os caracteres sejam dispostos como seriam horizontalmente, mas com toda a linha girada 90° no sentido horário.

Modo de escrita

A propriedade do modo de escrita pode ser usada para controlar se a direção da escrita (o eixo embutido ) é horizontal ou vertical. Correspondentemente, a direção da linha (o eixo do bloco ) corre em ângulos retos com ela. Esta propriedade destina-se principalmente à exibição de fontes asiáticas. As seguintes informações são possíveis:

• horizontal-tb - Conteúdo é disposto horizontalmente da esquerda para a direita, verticalmente de cima para baixo. A proxima inha horizontal é posicionada abaixo da linha anterior.
• vertical-rl - Conteúdo é disposto verticalmente de cima para baixo, horizontalmente da direita para a esquerda. A proxima linha vertical é posicionada à esquerda da linha anterior.
• vertical-lr - Conteúdo é disposto verticalmente de cima para baixo, horizontalmente da esquerda para a direita. A proxima linha vertical é posicionada à direita da linha anterior.
• sideways-rl Experimental - Conteúdo é disposto verticalmente de cima para baixo e todos os glifos, até mesmo os que estão em uma escrita vertical, são colocados lado a lado para a direita.
• sideways-lr Experimental - Conteúdo é disposto verticalmente de cima para baixo e todos os glifos, até mesmo os que estão em uma escrita vertical, são colocados lado a lado para a esquerda.

Ordenação

Quando as listas são classificadas alfabeticamente pelo MediaWiki, a ordem dos caracteres é a mesma que a dos pontos de código Unicode. Ou seja, o caractere utilizável que vem primeiro na sequência Unicode (o caractere de espaço) será classificado como o mais alto nas listas classificadas; quando uma entrada na lista começa com um espaço, é provável que essa entrada esteja no topo da lista classificada (a menos que outra entrada na lista comece com mais de um espaço consecutivo, é claro). Alguns caracteres mais comuns são ordenados da seguinte maneira (em ordem crescente):

!"#$%&'()*+,-./0123456789:;<=>?@ ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_' abcdefghijklmnopqrstuvwxyz{|}~ ¡¢£¤¥¦§¨©ª«­®¯°±²³´µ•¸¹º»¼½¾¿ ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ ĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋ ŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſ ǺǻǼǽǾǿ΄΅Ά·ΈΉΊΌΎΏΐ ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰ αβγδεζηθικλμνξοπρςστυφχψωϊϋόύώ

Categorias

As categorias são classificadas de forma diferente das outras listas. Como exatamente eles são classificados depende da configuração do wiki, via $ wgCategoryCollation. Ordenações mais complexas também são possíveis.

Classificando linhas de uma tabela

Quando uma lista de entradas é incluída em uma tabela em uma página, você pode usar JavaScript para tornar a tabela 'classificável' (não é possível forçar uma tabela a ser classificada por um pedido padrão no carregamento da página). Para fazer isso, adicione a classe "classificável" à declaração da tabela e verifique se você definiu os cabeçalhos usando marcas de exclamação:

Você digita	O resultado é
{| class="wikitable sortable" |- ! Fruit  !! Price |- | Apples || £0.95 |- | Oranges || £0.85 |- | Pears || £1.15 |- | Purple mangosteen || £1.05 |}	Fruit Price Apples £0.95 Oranges £0.85 Pears £1.15 Purple mangosteen £1.05

Ao clicar nos botões nos cabeçalhos das células, as entradas podem ser classificadas pelo valor nessa coluna, em ordem crescente ou decrescente.

Especificando uma chave de classificação

Dependendo do wiki, o valor de classificação de dados pode ser usado para especificar uma chave de classificação. Nas versões do MediaWiki anteriores a 1.22.0, $ wgHtml5 precisa ser ativado; começando com a versão 1.22.0, isso não é mais necessário.

Você digita	O resultado é
{| class="wikitable sortable" ! Name and Surname ! Height |- |data-sort-value="Smith , John George-Jackson"| John George-Jackson Smith | 1.85 |- |data-sort-value="Ray , Ian"| Ian Ray | 1.89 |- |data-sort-value="Bianchi , Zachary"| Zachary Bianchi | 1.72 |- |data-sort-value="Bianchi Maria , Adele"| Adele Bianchi Maria | 1.82 |- class="sortbottom" ! Average: | 1.82 |}	Name and Surname Height John George-Jackson Smith 1.85 Ian Ray 1.89 Zachary Bianchi 1.72 Adele Bianchi Maria 1.82 Average: 1.82

Maiores informações para criação de tabelas em modo avançado consulte:

URL: https://pt.wikipedia.org/wiki/Ajuda:Tutorial/Tópicos_avançados

URL: https://www.w3.org/TR/html401/struct/tables.html

URL: http://www.tablesgenerator.com/mediawiki_tables#

URL: http://wikieducator.org/ALL_ABOUT_TABLES_(FROM_MEDIAWIKI)

URL: https://meta.wikimedia.org/wiki/Help:Table