Predefinição:Tutorial Tabelas Responsivas

De PokeXGames
Revisão de 16h44min de 27 de maio de 2021 por Emanuff (discussão | contribs) (Criou página com '<p style="color: red;"><b> Tutorial feito por Sylither sob a supervisão de Lorde Tyrael, quaisquer erro, problema ou sugestão que tenha, favor entrar em contato com um dos d...')
(dif) ← Edição anterior | Revisão atual (dif) | Versão posterior → (dif)
Ir para navegação Ir para pesquisar

Tutorial feito por Sylither sob a supervisão de Lorde Tyrael, quaisquer erro, problema ou sugestão que tenha, favor entrar em contato com um dos dois.

Tutorial de Tabelas Simples e Responsivas

Este tutorial tem como objetivo melhorar a formatação das tabelas do wiki, para que usuários utilizando outros dispositivos, como: smartphones, tablets, entre outros dispostivos, tenham uma melhor visualização da página.

Tabelas Simples

As Tabelas Simples são fáceis e rápidas de serem feitas. Porém, quando visualizadas em um dispositivo menor, não há uma quebra de linha, ou seja, tabelas de 2 ou mais colunas estruturadas em html (sem css) ou media wiki não vão se transformar em uma tabela de 1 coluna para se adequar em uma tela de smartphone, tablet, etc.

Existem duas formas de criar uma tabela simples: utilizando html ou media wiki. Recomendo que utilizam o método do media wiki por conta do gerador de tabelas, disponibilizado abaixo.

Tabela em Html

É recomendado que utilize a tabela em Media Wiki, mas sinta-se livre para utilizar a forma que desejar.

Observações importantes:
- Evite ao máximo limitar a largura de um elemento grande ou da tabela toda com px style="width: 300px;". Para isso utilize style="width: 50%;" em porcentagem, pois ao utilizar px torna o tamanho do elemento fixo e isso pode dificultar na visualização em dispositivos menores.
- Utilize na primeira linha, no cabeçalho da tabela, o th (table header) em vez de td (table data).
Exemplo:

  
  


  
  


Obs: O código acima é apenas um pedaço do código padrão de uma tabela html.

- É Possível utilizar a class="wikitable" na tabela, deixarei um exemplo abaixo de tabela em html utilizando a class mencionada.

Item 1 Item 2 Item 3
Dado 1 Dado 2 Dado 3
Dado 1 Dado 2 Dado 3

Para mais informações sobre tabelas em Html, visite: | Clicando Aqui


Tabela em Media Wiki


{| class="wikitable"
|-
! Item
! Quantidade
! Preço
|-
| Pão
| 0.3 kg
| $0.65
|-
| Manteiga
| 0.125 kg
| $1.25
|-
| 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

Para mais informações sobre tabelas em Media Wiki, visite: | Clicando Aqui


Gerador de Tabelas Media Wiki

Para facilitar um pouco a vida dos editores da wiki, disponibilizarei um link abaixo contendo um gerador automático de tabelas. Para utilizar, basta selecionar o tipo de tabela "MediaWiki Tables", clicar em "Table" e escolher um tamanho na opção "Set size".

Instruções Adicionais:
- Para escolher a posição do texto da célula da tabela, selecione a célula desejada e vá em "Column"->"Text align" (ou clique em um dos três botões) e escolha uma das posições:
  Left: Esquerda - Center: Texto centralizado - Right: Direita.
- Clicando em cada célula da tabela, abre uma caixa de texto, podendo ser digitado o conteúdo da tabela. Recomendo que digite somente algo para se orientar e depois edite o código da tabela para o conteúdo final.
- Abaixo desse subMenu terá várias opções de formatação de texto com alguns botões, podendo:
- unir/separar as células da tabela,
- Mudar a cor da letra
- Mudar cor de fundo de cada célula (lembrando de antes, selecionar todas as células da tabela que queira fazer alteração de cor)


Gerador de Tabelas: | Clique Aqui


Tabelas Responsivas (recomendadas)

As tabelas responsivas alteram seu tamanho e podem alterar sua forma dependendo do tipo de dispositivo no qual está sendo visualizada. Por exemplo, uma tabela visualizada em um desktop com várias colunas pode ser compactada até se tornar uma tabela de apenas uma coluna quando visualizada em um smartphone, tablet ou algum outro disponitivo de pequeno porte.

Como é um pouco complicado ensinar como construir uma tabela utilizando este método, serão colocados alguns modelos abaixo para que possam alterar o conteúdo e utilizar em suas páginas. Qualquer dúvida que tiverem ou precisarem de um modelo diferente, favor mandar uma PM para Sylither ou Lorde Tyrael.

Visualização no Desktop

TutorialTabelasResponsivasDesktop.png

Visualização no Smartphone

TutorialTabelasResponsivasSmartphone.png


Exemplos de Tabelas Responsivas


Nome
Ícone
Tier 1
Tier 2
Tier 3
Tier 4
Tier 5
Tier 6
Tier 7
Descrição
X-Vitality
Vitality.png
5%
5%
5%
15%
15%
15%
15%
Aumenta a vida do Pokémon em X%



Acrobatics
Ancient Absorb
Ancient Absorb
Ancient Absorb
Acrobatics
Acrobatics



Ícone
Nº Dex
Nome
010-Caterpie.png
#010
Caterpie
010-Caterpie.png
#010
Caterpie
Ícone
Nº Dex
Nome
010-Caterpie.png
#010
Caterpie
010-Caterpie.png
#010
Caterpie
Ícone
Nº Dex
Nome
010-Caterpie.png
#010
Caterpie
010-Caterpie.png
#010
Caterpie


A ordem dos elementos de uma tabela, utilizando este método responsivo, podem ser alterados facilmente utilizando style="order: NÚMERO;", como, no exemplo abaixo do metapod.
Lembrando que caso não especifique order de um elemento, ele terá como padrão o 0, por conta disso que foi utilizado order: -1 no metapod, pois os outros elementos estão com order: 0.


  • 010-Caterpie.png
  • Caterpie
  • 010-Caterpie.png
  • Caterpie
  • 010-Caterpie.png
  • Caterpie
  • 010-Caterpie.png
  • Caterpie
  • 010-Caterpie.png
  • Caterpie
  • 010-Caterpie.png
  • Caterpie
  • 010-Caterpie.png
  • Caterpie
  • 010-Caterpie.png
  • Caterpie
  • 010-Caterpie.png
  • Caterpie
  • 011-Metapod.png
  • Metapod



Alimentos
  • NPC Hugh
  • BrenoT.png
  • NPC Hugh
  • BrenoT.png
  • NPC Hugh
  • BrenoT.png
  • NPC Hugh
  • BrenoT.png
  • NPC Hugh
  • BrenoT.png
  • NPC Hugh
  • BrenoT.png
  • NPC Hugh
  • BrenoT.png


Para mais informações sobre o método flex, utilizado nas tabelas acima, visite: | Clicando Aqui