FANDOM


Há várias práticas de wikitexto que, embora sejam úteis para usuários experientes no site completo, interferem em como o conteúdo é mostrado nas plataformas móveis. Tabelas aninhadas são um exemplo disso.

Um lembrete sobre as melhores práticas para o site móvel: Você sempre pode pré-visualizar como as suas edições vão aparecer em dispositivos móveis adicionando o código ?useskin=wikiamobile no final do url da wiki, ou se você estiver usando o editor clássico, você pode selecionar 'mobile' do menu no canto superior esquerdo da janela de pré-visualização.

O que são tabelas aninhadas?

Tabelas aninhadas são simplesmente tabelas dentro de outras tabelas.

Aqui está um exemplo de tabelas aninhadas na nossa comunidade Brave Frontier. Note a diferença entre a visão desktop e a versão menos otimizada no site móvel.
Desk Mob

Por que essas tabelas aninhadas são ruins?

Você deve evitar tabelas aninhadas sempre que possível. Tabelas, em geral, sempre usam a menor largura que elas podem e até mesmo se expandem verticalmente quando o espaço horizontal é limitado. Entretanto, se uma tabela estiver dentro de uma outra tabela, as células dessa tabela tem que acomodar as células da tabela adicional. Em essência, a estrutura da tabela é forçada a ser muito mais larga do que o espaço permite. Isso é especialmente ruim para o display em aparelhos móveis, já que o tamanho da tela é muito menor.

O resultado: Isso causa páginas muito compridas em aparelhos móveis (uma experiência ruim para o usuário), e a maior parte da tabela está escondida da vista. Se você quebrar as tabelas aninhadas em várias outras tabelas independentes, a informação é mostrada verticalmente, ao invés de horizontalmente.

Isso também faz com que cada tabela seja mais dinâmica. O conteúdo formatado é ditado pelo tamanho da tela do dispositivo móvel. Portanto, o navegador também moverá as tabelas onde elas possam ser mostradas para melhorar o fluxo da rolagem da página.

O que fazer se a sua comunidade usar tabelas aninhadas

Encoraje-os a quebrar as tabelas aninhadas e tentar criar uma estrutura que não é dependente de tabelas dentro de tabelas. Na maioria das vez, colocar as tabelas lado a lado consegue o mesmo resultado. Se o conteúdo é apresentado em formato de tabela, você sempre pode ajustar as células de uma tal maneira que elas pareçam uma tabela dentro de outra, mas sendo somente uma grande tabela.

Melhores práticas para evitar tabelas aninhadas

Como identificar tabelas aninhadas

No modo fonte, tabelas sempre começam com o wikitexto {| ou HTML <table>. Tabelas são fechadas com o código oposto: |} ou </table>. Portanto, se você encontrar o começo de uma tabela antes do fim de outra, isso indica uma tabela aninhada. Isso pode se extender por diversos níveis.

Aqui está um exemplo de código de uma tabela aninhada:
Example code 1024

Como quebrar tabelas aninhadas

O primeiro passo é identificar quantas tabelas estão aninhadas dentro da tabela principal. O segundo passo é encontrar a tabela que está mais aninhada e tirá-la da rede de tabelas. Agora, clique em "pré-visualização" e você terá uma idéia de como a tabela funciona quando está separada. Depois de pré-visualizar, você pode diagnosticar as tabelas que não funcionam como esperado, checando os parâmetros da tabela (o código que segue imediatamente a {|) Depois que você tiver tirado todas as tabelas internas da tabela principal, você pode deletar o código da tabela original. Agora as tabelas podem ficar alinhadas para um display mais otimizado.

Como preservar o seu display para o site completo agora que as tabelas estão separadas

Tabelas devem ser empilhadas de cima para baixo ou uma do lado da outra. Isso faz com que o navegador do dispositivo móvel empurre e mova as tabelas para que elas caibam dentro do espaço permitido no display móvel. Se as tabelas estão lado-a-lado e não cabem dentro da tela, o navegador automaticamente empurra a última tabela para baixo.

Entretanto, um dos maiores desafios que você vai encontrar nesse estágio de posicionar tabelas é encontrar o meio-termo entre como elas devem aparecer no desktop versus como elas devem aparecer no site móvel. Talvez seja necessário ajustar o CSS inline para controlar como as tabelas aparecem na versão completa. Inserir CSS no wikitexto da sua tabela afetará somente a versão completa do site, então a versão móvel ainda será mostrada corretamente. Se você precisar de ajuda para configurar as suas tabelas, veja a lista de recursos no fim da página.

Mais informações úteis sobre tabelas alinhadas

Lembre-se, se uma predefinição estiver sendo usada para mostrar uma tabela para várias páginas, fixar a tabela aninhada nessa predefinição também consertará a versão para site móvel para todas as páginas que contém a predefinição. Isso significa que utilizar essa prática de otimização nas suas predefinições terá um grande impacto para a sua comunidade em geral.

Tabelas com imagens em células individuais forçarão as células a seguir o tamanho da imagem. Portanto, imagens devem ser reduzidas para um tempo que seja amigável ao site móvel, ou tiradas das células em geral. Se a imagem é muito grande e fora da tabela, o navegador do aparelho móvel irá automaticamente reduzi-la para que ela caiba na versão móvel.

Estudo de Caso "Brave Frontier"

A comunidade Brave Frontier foi gentil o suficiente para ser a nossa cobaia nesse projeto de tentar eliminar as tabelas aninhadas. Nós conseguimos encontrar o balanço entre quebrar tabelas aninhadas para uma das suas predefinições mais importantes (a de personagens), e preservar o visual da versão completa. O resultado é um layout móvel melhorado para um grande número de artigos na comunidade. Veja:


Mais recursos

Entre em contato com a Fandom Staff

Você precisa de ajuda para mudar as tabelas aninhadas na sua comunidade? Entre em contato via Especial:Contact. Por favor, adicione Fandom Móvel:Tabelas Aninhadas na linha de assunto.

Mais páginas de ajuda...


Outros recursos de suporte...

Interferência de bloqueador de anúncios detectada!


A Wikia é um site grátis que ganha dinheiro com publicidade. Nós temos uma experiência modificada para leitores usando bloqueadores de anúncios

A Wikia não é acessível se você fez outras modificações. Remova o bloqueador de anúncios personalizado para que a página carregue como esperado.