Manual do Leone/Tabelas

As tabelas são um arranjo de linhas e colunas que permitem a organização de dados e imagens.

Para mostrarmos conteúdo em colunas diferentes, nós podemos colocar tanto os cabeçalhos e os dados em linhas diferentes (com ! e |) quanto na mesma linha (com !! e ||), que fornecem o mesmo resultado. Para mudarmos a linha, temos que colocar o indicador de linha da tabela (|-), que não necessariamente vai mostrar uma linha.

Visão geral da marcação básica de uma tabela

Elemento	Função	Status	Notas
{|	Inicia uma tabela	Obrigatório	Deve ser colocado na parte de cima.
|+	Legenda da tabela	Opcional	Deve ser colocado entre o início da tabela e a primeira linha da tabela.
|-	Coloca uma linha da tabela	Opcional	Pode ser omitido antes da primeira linha. Todo o conteúdo entre dois em |- fica contido na mesma linha.
!}} ou !!	Insere uma célula de cabeçalho	Opcional	Para colocar um cabeçalho por linha, use um símbolo de exclamação (!). Para colocar mais cabeçalhos na mesma linha, use dois símbolos de exclamação (!!).
|}} ou ||	Insere uma célula de dado	Opcional	Para colocar um dado por linha, use uma barra vertical (|). Para colocar mais dados na mesma linha, use duas barras verticais (||).
|}	Finaliza uma tabela	Obrigatório	Deve ser colocado por último

Classes

Sem classe

A legenda da tabela é centralizada em desktops e alinhado à esquerda em dispositivos móveis, o cabeçalho é centralizado e seu texto é em negrito, os dados são alinhados à esquerda. A cor das letras é preta e a cor de fundo é branca. Não há nenhuma borda, de modo que as bordas externas que aparecem são meramente ilustrativas.

• Forma 1 no código-fonte

{|
|+Legenda
|-
! Animal
! Alimento
|-
| Gato
| Mingau quente
|-
| Cachorro
| Ração do cão
|}

• Forma 2 no código-fonte

{|
|+Legenda
|-
! Animal !! Alimento
| Gato || Mingau quente
|-
| Cachorro || Ração do cão
|}

• Resultado na tela

Legenda

Animal	Alimento
Gato	Mingau quente
Cachorro	Ração do cão

Classe wikitable

O atributo class é usado para atribuir uma classe para um elemento wiki. Ele deve ser colocado à direita do indicador de início da tabela, seguido de um sinal de igual e do nome da classe escolhida. Todas as classes possuem uma folha de estilo própria, que definem cor, tamanho, posição, bordas, entre outras coisas. A classe escolhida deve ser colocada à direita de {|.

A classe wikitable fornece as seguintes mudanças na tabela: o cabeçalho fica em negrito, o fundo das células de cabeçalho passa a ser cinza, surgem bordas pretas finas em torno das células e o conteúdo das células ficam um pouco mais afastados.

• Forma 1 no código-fonte

{| class="wikitable"
|+Rango de pet
|-
! Animal
! Alimento
|-
| Gato
| Mingau quente
|-
| Cachorro
| Ração do cão
|}

• Forma 2 no código-fonte

{| class="wikitable"
|+Rango de pet
|-
! Animal !! Alimento
| Gato || Mingau quente
|-
| Cachorro || Ração do cão
|}

• Resultado na tela

Legenda

Animal	Alimento
Gato	Mingau quente
Cachorro	Ração do cão

Classe sortable

A classe sortable permite colocar as colunas em ordem alfabética ou em ordem inversa, assim como colocar os números em ordem crescente ou decrescente. As classes podem ser usadas em conjunto, de forma que o uso conjunto entre as classes wikitable e sortable é mais indicado do que o uso da classe sortable sozinha. Para colocarmos duas classes, temos a seguinte estrutura: class="nomeclasse1 nomeclasse2". Repare que elas são separadas apenas por um espaço simples e estão dentro das aspas (pode ser aspas simples ou duplas). Seguindo essa lógica, é possível colocar mais classes.

Setas para cima e para baixo surgem ao lado das colunas. Se você clicar uma vez em um cabeçalho, a tabela vai ficar na ordem alfabética (caso sejam palavras) ou em ordem crescente (caso sejam números) baseada na ordenação dessa coluna, de maneira que a seta para baixo dessa coluna some, só ficando a seta para cima. Se a gente clicar novamente no cabeçalho, vai ficar na ordem inversa, com apenas a seta para baixo aparecendo. Por fim, se clicarmos de novo no cabeçalho, vai voltar a ordem original definida na tabela, com as duas setas aparecendo.

• Forma 1 no código-fonte

{| class="wikitable sortable"
|+Ordem
|-
! Palavras
! Números
|-
| Mesa
| 3
|-
| Cadeira
| 1
|-
| Sofá
| 4
|-
| Estante
| 2
|}

• Forma 2 no código-fonte

{| class="wikitable sortable"
|+Ordem
|-
! Palavras !! Números
|-
| Mesa || 3
|-
| Cadeira || 1
|-
| Sofá || 4
|-
| Estante || 2
|}

• Resultado na tela

Ordem

Palavras	Números
Mesa	3
Cadeira	1
Sofá	4
Estante	2

Classe mw-collapsible

Já a classe mw-collapsible possibilita que o conteúdo da tabela seja ocultado. Pode ser usado em qualquer tipo de tabela, mas normalmente é usado em tabelas grandes. Como as outras classes, pode ser usada sozinha ou em conjunto com outras classes.

No exemplo abaixo, é mostrado um caso em que o marcador de cabeçalho (!) é usado para nomear uma linha. No entanto, se ele for usado na mesma linha dos outros dados (no código-fonte), isto é, ! 1 || 1 || 2 || 3 || 4, a formatação dele será aplicada a todas as células da linha dessa tabela (o que é mostrado na tela). Logo, é necessário colocar os outros dados em outra linha para a formatação de título não seja aplicada a eles. Por sua vez, no código-fonte, os dados podem ser colocados todos na mesma linha, separados por duas barras verticais (||), ou em linha próprias, separados apenas por uma barra vertical (|), que normalmente é colocada no início da linha.

• Código-fonte

{| class="wikitable mw-collapsible"
|+Multiplicação
|-
! X !! 1 !! 2 !! 3 !! 4
|-
! 1
| 1 || 2 || 3 || 4
|-
! 2
| 2 || 4 || 6 || 8
|-
! 3
| 3 || 6 || 9 || 12
|-
! 4
| 4 || 8 || 12 || 16
|}

• Resultado na tela

Multiplicação

X	1	2	3	4
1	1	2	3	4
2	2	4	6	8
3	3	6	9	12
4	4	8	12	16

Classes mw-collapsible mw-collapsed

A classe mw-collapsible usada em conjunto com mw-collapsed deixa o contéudo da tabela ocultado por padrão, tendo como opção expandir. Em comparação, se colocarmos apenas a classe mw-collapsible, o conteúdo da tabela é mostrado por padrão (expandido), tendo como opção ocultar. Não devemos usar classe mw-collapsed sozinha, pois o conteúdo da tabela não será mostrado.

• Código-fonte

{| class="wikitable mw-collapsible mw-collapsed"
|+Multiplicação
|-
! X !! 1 !! 2 !! 3 !! 4
|-
! 1
| 1 || 2 || 3 || 4
|-
! 2
| 2 || 4 || 6 || 8
|-
! 3
| 3 || 6 || 9 || 12
|-
! 4
| 4 || 8 || 12 || 16
|}

• Resultado na tela

Multiplicação

X	1	2	3	4
1	1	2	3	4
2	2	4	6	8
3	3	6	9	12
4	4	8	12	16

Atributo style

Esse atributo contém as informações de CSS que se aplicam as tabelas. O atributo style permite alterar a borda, cor do texto, cor de fundo, margem, alinhamento e tamanho do texto do texto, entre outras coisas. Ele possui a seguinte sintaxe: style="propriedade:valor;".

Largura

Por padrão, a largura das células é moldada pelo conteúdo. Como as células de uma mesma coluna apresentam a mesma largura, a célula que precisar ser mais extensa para se moldar ao seu conteúdo, vai definir a largura de todas as células dessa coluna. Assim, colunas diferentes podem ter larguras diferentes por padrão.

Para mudarmos isso, podemos nos valer da propriedade width (largura) do atributo style, de modo que possui a seguinte sintaxe: style="width:valor;". Se nós o colocamos na primeira linha, isto é, à direita do símbolo de início da tabela ({|), esse formatação vai valer para toda a tabela. No entanto, se colocamos ao lado de ! ou |, isso vai ser aplicado na coluna que eles representam. Por questão de organização, o recomendado é colocar ao lado do símbolo de cabeçalho !). Note que precisamos colocar uma barra vertical (|) entre esse código e o conteúdo da célula. O valor passado é constituído por um número seguido da unidade. As unidades de medida mais usadas para a largura são:

• px

O nome px vem de pixel. É uma unidade de medida absoluta que mede um pixel em uma tela de 96 dpi. Como ela é uma medida absoluta, se nós definirmos uma coluna com 50px, o comprimento pelo qual definimos a tabela como um todo não vai importar, a coluna continuará com 50px. Entretanto, como a definição de pixel usada está relacionada a uma tela de 96 dpi, uma tela com outra resolução vai mudar o tamanho definido em px. Se a gente definir um valor em px menor ou igual ao necessário para conter a palavra ou o número mais extenso, não irá mudar em nada.

• Código-fonte

{| class="wikitable"
|+ Brasil
|-
! style="width:200px;"| Estado
! style="width:150px;"| Região
|-
| Pará || Norte
|-
| Pernambuco || Nordeste
|}

• Resultado na tela

Brasil

Estado	Região
Pará	Norte
Pernambuco	Nordeste

• %

Esta unidade é uma medida relativa que está relacionada com proporções. Por padrão, as tabelas tem style="width:100%;", isto é, a tabela irá preencher toda a largura da tela se tiver conteúdo suficiente. Se você diminuir essa porcentagem, o conteúdo de certas células irão para a linha de baixo, mas ainda na mesma célula. Podemos definir uma porcentagem para certas colunas que serão relativas ao tamanho definido para a tabela na primeira linha. Se tabela é definida com 300px, uma coluna definida com 50% terá 150px. Por outro lado, se a tabela for definida como 90%, uma coluna definida com 50% na verdade será 50% de 90%, ou seja, 45%.

• Código-fonte

{| class="wikitable" style="width:300px;"
|+ Roupas
|-
! style="width:50%;"| Venda
! style="width:50%;"| Tipo
|-
| Camisa || Vermelha de algodão
|-
| Casaco || Marrom de lã
|}

• Resultado na tela

Roupas

Venda	Tipo
Camisa	Vermelha de algodão
Casaco	Marrom de lã

Alinhamento

Para mudarmos o alinhamento dos dados das tabelas, temos que usar a propriedade text-align do atributo style, que possui a seguinte forma: style="text-align:valor;". O valor pode ser left (esquerda), center (centro) ou right (direita).

Se nós colocarmos esse atributo na mesma linha e à direita do símbolo de início da tabela ({|), essa estilização será aplicada a todos os elementos da tabela colocados ao lado de barras verticais (|). A posição relativa em relação ao atributo class não faz diferença, mas normalmente o atributo style é colocado mais à direita. O primeiro elemento de linha (|-) não precisa ser colocado, mas é recomendado para fins de organização. O alinhamento da legenda e das cabeçalhos não são alterados quando colocamos o código no topo da tabela.

• Código-fonte

{| class="wikitable" style="width:300px; text-align:right;"
|+ Tipos de elementos
|-
! Elemento !! Forma encontrada
|-
| Água || Líquida
|-
| Sal || Sólido
|}

• Resultado na tela

Tipos de elementos

Elemento	Forma encontrada
Água	Líquida
Sal	Sólida

Também podemos mudar o alinhamento dos elementos de apenas uma linha. Para realizarmos isso, devemos colocar o atributo style à direita do marcador de linha (Predefinição:Kbd), que está imediatamente acima dos dados que representam a linha desejada.

• Código-fonte

{| class="wikitable"
|+ Nomes lusófonos
|-
! Nome brasileiro
! Nome português
|-style="text-align:center;"
| Rafael || Manoel
|-
| Leonardo || Joaquim
|}

• Resultado na tela

Nomes lusófonos

Nome brasileiro	Nome português
Rafael	Manoel
Leonardo	Joaquim

Como os procedimentos anteriores não alteram nem o alinhamento da legenda nem dos cabeçalhos, para mudá-los temos que colocar o atributo style na mesma linha, um a um. Esse modo também pode mudar o alinhamento de células específicas dos dados normais, isto é, os que ficam ao lado da barra vertical (|).

• Código-fonte

{| class="wikitable"
|+ style="text-align:right;" |Bichanos
|-
! style="text-align:left;" |Animal
! style="text-align:left;" |Comportamento
|-
| Mico-leão-dourado || Tímido
|-
| Leão || Feroz e territorialista
|}

• Resultado na tela

Bichanos

Animal	Comportamento
Mico-leão-dourado	Tímido
Leão	Feroz e territorialista

Cores

Para mudar a cor do texto, temos que usar a propriedade color. Já para mudar a cor de fundo temos que usar a propriedade background. Se nós quisermos usar mais de uma propriedade, temos que colocar um ponto e vírgula (;) após o primeiro valor. No entanto, se usarmos apenas uma propriedade, o ponto e vírgula é opcional, não mudando em nada no resultado mostrado na tela. O conteúdo do atributo e do texto da célula devem ser colocados na mesma linha e separados por uma barra vertical (|).

Há quatro tipos de valores que podem ser passados às propriedades color e background: o nome das cores (em inglês), a codificação hexadecimal, valores em RGB e valores em HSL.

• Nome da cor

Podemos usar o nome de uma das cores em inglês disponíveis, algumas mais famosas, como Red, Blue, Black, e outras menos famosas como DarkOrchid, Khaki e FloralWhite. O sistema não diferencia letras minúsculas e maiúsculas.

• Hexadecimal

Consiste em seis números após uma cerquilha (#). Os dois primeiros elementos representam a intensidade de vermelho, o dois seguintes representam a intensidade de verde e os dois últimos a intensidade de azul. Assim, o resultado final é a combinação dessas três cores em diferentes intensidades, formando a cor desejada. Os valores variam entre 00 (mais escuro) até FF (mais claro), isto é, do mais escuro para o mais claro, temos [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F]. As letras podem ser colocadas tanto em letras minúsculas quanto em maiúsculas. Se as três primeiras letras são iguais às três últimas, só precisamos colocar colocar as três primeiras letras, isto é, #ccf é equivalente a #ccfccf.

• RGB

A sigla significa Red (vermelho), Green (verde) e Blue (azul). É representado por três valores entre parênteses, com uma escala que varia de 0 a 255. A primeiro número representa o vermelho, o segundo o verde e último representa o azul. Um quarto número pode ser adicionado, representando a opacidade, com uma escala que varia de 0.0 (transparente) a 1.0 (opaco). O último valor é conhecido como valor alfa e o sistema com quatro números é chamado de RGBA.

• HSL

A sigla representa Hue (tom), Saturation (saturação) e Lightness (luminosidade). O valor do tom é medido em graus, com sua escala variando de 0 a 360 (não é para colocar o símbolo de graus). Já a saturação é representada em porcentagem, de 0% a 100%. A luminosidade também é representada em porcentagem, sendo 0% a cor preta e 100% a cor branca. Do mesmo modo que o sistema RGBA, podemos adicionar mais um número para representar a opacidade, com uma escala de 0.0 a 1.0, resultando no sistema HSLA.

Cores de referência

Cor	Nome	Hex	RGB	HSL	Visual
Branco	white	#ffffff	rgb(255,255,255)	hsl(0, 100%, 100%)
Preto	black	#000000	rgb(0,0,0)	hsl(0, 100%, 0%)
Vermelho	red	#ff0000	rgb(255,0,0)	hsl(0, 100%, 50%)
Verde	lime	#00ff00	rgb(0,255,0)	hsl(120, 100%, 50%)
Azul	blue	#0000ff	rgb(0,0,255)	hsl(240, 100%, 50%)

Aplicação das cores

• Código-fonte

{| class="wikitable"
! Muda a cor da letra
! Muda a cor do fundo
! Muda a cor do fundo e da letra
|-
| style="color:red;" | Cor da letra em inglês
| style="background:yellow;" | Cor do fundo em inglês
| style="color:white; background:brown;" | Cor da letra e fundo em inglês
|-
| style="color:#085705;" | Cor da letra em hexadecimal
| style="background:#fabbfa;" | Cor do fundo em hexadecimal
| style="color:#d604cc; background:#10f507;" | Cor da letra e fundo em hexadecimal
|-
| style="color:rgb(87, 109, 222);" | Cor da letra em RGB
| style="background:rgb(182, 240, 194);" | Cor do fundo em RGB
| style="color:rgb(133, 237, 234); background:rgb(51, 26, 18);" | Cor da letra e fundo em RGB
|-
| style="color:hsl(12, 3%, 50%);" | Cor da letra em HSL
| style="background:hsl(357, 71%, 77%);" | Cor do fundo em HSL
| style="color:hsl(226, 100%, 50%); background:hsl(45, 100%, 50%);" | Cor da letra e fundo em HSL
|}

Resultado na tela

Muda a cor da letra	Muda a cor do fundo	Muda a cor do fundo e da letra
Cor da letra em inglês	Cor do fundo em inglês	Cor da letra e fundo em inglês
Cor da letra em hexadecimal	Cor do fundo em hexadecimal	Cor da letra e fundo em hexadecimal
Cor da letra em RGB	Cor do fundo em RGB	Cor da letra e fundo em RGB
Cor da letra em HSL	Cor do fundo em HSL	Cor da letra e fundo em HSL

Borda

As propriedades border-width, border-style e border-color podem ser agrupadas em uma só propriedade chamada border, que é responsável por definir as características das quatro bordas. Assim, se nós a colocarmos na primeira linha, para definir a borda da tabela inteira, as bordas internas não serão configuradas, permanecendo na definição padrão.

Se duas células vizinhas tiverem definições de bordas diferentes, a linha que separa as duas células herdará a configuração da borda definida com a maior largura. Isso não se aplica a borda hidden, que é sempre prioritária. Caso as definições possuírem a mesma largura, o desempate será pelo tipo do borda, em que a ordem preferencial é dada por double > solid > dashed > dotted > inset > none (considerando as mais usadas).

A sintaxe é dada por style="border: valor1 valor2 valor3;". A ordem dos tipos de valores é irrelavante.

• border-width — determina a largura da borda. O valor passado é constituído pelo número seguido da unidade, que normalmente é px.
• border-style — diz respeito ao estilo de borda. Pode ser solid (borda contínua), dotted (borda pontilhada), dashed (borda tracejada), double (borda contínua dupla), inset, outset, ridge, groove, none e hidden.
• border-color — determina a cor da borda. O valor passado pode ser o nome em inglês das cores, hexadecimal, RGB ou HSL.

• Código-fonte

{| class="wikitable"
|+ Futebol
! style="border-color:red; border-style:dotted; border-width:3px"| Jogador
! style="border:red dotted 3px;"| Posição 
! style="border:inset 3px red;"| Camisa
|-
| Amaral
| Volante
| 5
|-
| style="border: 4px dashed #226de6;"| Juan
| style="border: 4px double rgb(112, 22, 106);"| Zagueiro
| style="border: 4px solid hsl(116, 61%, 35%);"| 4
|}

• Resultado na tela

Futebol

Jogador	Posição	Camisa
Amaral	Volante	5
Juan	Zagueiro	4

Expansão do tamanho das células

Para expandirmos o número de colunas que uma célula vai ocupar, devemos usar o atributo colspan, com a estrutura colspan="valor". O "col" que vem antes de "span" se refere a column (coluna) e span quer dizer "abranger". Já para expandir o número de colunas, usamos o atributo rowspan, da sintaxe rowspan="valor". O "row" antes de "span" significa row (linha) mesmo. O valor se refere ao número de colunas ou linhas que serão expandidas.

• Código-fonte

{| class="wikitable"
! colspan="3"|Linguagens e Frameworks
|-
| Python || Django
|-
| rowspan="2"| Javascript || React.js
|-
| Vue.js
|-
| Ruby || Ruby on Rails
|}

• Resultado na tela

Linguagens e Frameworks
Python	Django
Javascript	React.js
	Vue.js
Ruby	Ruby on Rails