Tabelas

As tabelas fornecem acesso a números precisos e informações específicas em grandes conjuntos de dados densos. Elas permitem que os usuários escaneiem, comparem e analisem dados em múltiplas direções – na ordem de sua escolha – e tomem ações com base nessas informações.

Em aplicativos complexos projetados para logística, gerenciamento de projetos, vendas, relações com clientes ou recursos humanos, a maioria das telas pode conter – ou simplesmente ser – uma grade ou tabela.

Nosso stencil de Tabela oferece uma experiência de edição completamente visual e permite que sua equipe personalize rapidamente células individuais ou múltiplas da tabela.

Neste artigo mostraremos como adicionar e formatar tabelas, e como personalizar suas colunas, linhas, células e texto.

Colar dados no Moqups

Você pode colar dados CSV diretamente em uma tabela existente, assim como faz com nossos stencils de Gráfico.

No entanto, se você não tiver uma tabela já na sua página, o recurso Colar no Formato permite transformar listas e dados CSV em tabelas instantaneamente preenchidas:

  1. Copie uma lista ou CSV do seu computador
  2. Use Ctrl/Cmd + V para colar esses dados na sua página do Moqups
  3. Clique no botão Tabela no modal Escolher um formato

Exportar ou copiar dados

Você pode exportar os dados da sua tabela como um arquivo CSV, ou pode copiar e colar.

Exportar dados da tabela como arquivo CSV

Você pode exportar os dados de toda a tabela ou apenas uma seleção de células.

Para exportar sua tabela inteira:

  1. Selecione a tabela na sua página
  2. Clique no botão Exportar na barra de opções azul
Exportar tabela inteira

Para exportar uma seleção de células de dados:

  1. Selecione a tabela na sua página
  2. Clique no botão Editar na barra de opções azul
  3. Segure a tecla Shift para selecionar as células a exportar
  4. Clique no botão Exportar na barra de ferramentas de formatação
Exportar tabela inteira

Copiar e colar dados da tabela

Você pode copiar dados de uma tabela e colá-los…

  • fora do Moqups em uma planilha
  • dentro do Moqups como texto, notas adesivas, blocos de fluxograma, texto ou em outra tabela

Para copiar dados de uma tabela para a área de transferência em formato CSV:

  1. Selecione a tabela na sua página e clique em Editar Dados
  2. Use Ctrl/Cmd + A para selecionar todas as células da tabela, ou segure Shift para selecionar um grupo de células
  3. Pressione Ctrl/Cmd + C para copiar os dados
  4. Pressione Ctrl/Cmd + V para colar os dados da sua área de transferência no destino

Adicionar e redimensionar tabelas

O stencil de Tabela é encontrado na Biblioteca de Stencils e, assim como todos os stencils, pode ser adicionado à página, como objetos, por um único clique ou arrastar e soltar. Quando você adiciona uma tabela, o cursor está ativo na primeira célula, então você pode começar a digitar imediatamente.

Para redimensionar e reescalar, arraste qualquer uma das alças de ajuste e segure Shift se quiser manter a proporção da tabela.

  • Pressione Tab para mover para a próxima célula ao inserir dados
  • Pressione Enter na última célula para criar uma nova linha

Fixar objetos, ícones e imagens em tabelas

Assim como nossas Notas e Anotações e Containers, nosso stencil de Tabela tem capacidade de fixação. Embora as Tabelas não sejam fixas por padrão, você pode ativar rapidamente a fixidez (e desativá-la) no Painel de Formato.

Em seguida, você pode fixar todos os tipos de outros objetos – como ícones, avatares ou imagens – à sua tabela, e eles permanecerão no lugar conforme você move a tabela.

Formatar tabelas

Antes de mergulhar em uma edição mais detalhada, você pode usar a seção dedicada no Painel de Formato para tomar decisões iniciais de estilo sobre a tabela como um todo.

Aqui você pode optar por mostrar ou ocultar bordas, ajustar o padding das células ou adicionar listras zebra em linhas ou colunas alternadas.

Você também pode selecionar a família e tamanho da fonte da tabela, definir atributos de borda ou adicionar uma sombra projetada:

Na seção de edição de texto abaixo, explicamos como usar a barra de ferramentas de Formato Rápido para estilizar, colorir e adicionar links ao texto selecionado dentro da Tabela

Gerenciar e personalizar colunas, linhas e células

Clique no botão Editar Dados abaixo da tabela (ou dê um duplo clique no próprio stencil) para entrar no Modo de Edição da tabela.

Uma vez no modo de edição, você pode:

  • Duplicar, inserir, mover, excluir ou redimensionar linhas e colunas
  • Mesclar ou dividir células
  • Alterar a cor do texto e o fundo das células selecionadas

Clicar em qualquer lugar no gráfico revelará a barra de ferramentas pop-up onde você pode realizar essas funções.

E, como você verá mais abaixo, a barra de ferramentas também permitirá limpar, editar, alinhar, estilizar, colorir, destacar e aplicar links ao seu texto.

Para todas as seguintes funções, sua tabela deve estar no modo de edição:

Duplicar, inserir ou excluir linhas e colunas

Para duplicar uma linha ou coluna – incluindo seu texto existente – clique em um dos pontos ao longo dos cabeçalhos horizontal ou vertical:

Para inserir uma linha ou coluna vazia, clique nos botões Inserir Linha ou Inserir Coluna na barra de ferramentas:

Para excluir uma linha ou coluna, faça sua seleção e clique no botão de lixeira na barra de ferramentas:

Mover linhas e colunas para cima e para baixo ou lateralmente

Para mover linhas ou colunas existentes dentro da sua tabela, faça sua seleção e use as setas de Mover na extremidade direita da barra de ferramentas.

Redimensionar ou distribuir linhas e colunas

Para redimensionar linhas e colunas, use as linhas entre seus cabeçalhos. Se quiser definir as linhas e colunas com tamanhos iguais, basta clicar nos botões Distribuir Alturas das Células ou Distribuir Larguras das Células.

Mesclar e dividir células

Use os botões Mesclar Células ou Dividir Células na barra de ferramentas pop-up para realizar essas ações nas células selecionadas:

Cor de fundo e de texto da célula

A barra de ferramentas também permite selecionar a cor do texto e a cor de fundo para células individuais ou seleções. A cor pode ajudar a guiar o olhar do leitor para informações interessantes e facilitar a navegação pelos seus dados.

A cor das células também é útil se você quiser criar mapas de calor dentro da tabela – onde números mais altos correspondem a fundos de células mais escuros ou mais saturados.

Editar texto e conteúdo da tabela

Clique no botão Editar Dados abaixo da tabela para entrar no Modo de Edição da tabela.

Uma vez no modo de edição, você pode selecionar, limpar, editar, alinhar, estilizar, colorir, destacar e aplicar links ao seu texto. Clicar em qualquer lugar da tabela revelará a barra de ferramentas da tabela onde você pode realizar essas funções.

E, como discutimos acima, a barra de ferramentas também permitirá inserir, mover, excluir ou distribuir linhas e colunas; mesclar ou dividir células; alterar a cor do texto e o fundo das células selecionadas.

Selecionar, colorir ou limpar o conteúdo do stencil de tabela

Clique no botão Editar Dados (ou dê um duplo clique na tabela) para revelar os cabeçalhos e a barra de ferramentas da tabela. O botão redondo no canto superior esquerdo irá Selecionar tudo das células da tabela; você também pode usar Cmd + A.

Agora você pode usar a barra de ferramentas para alterar a cor da fonte e a cor de fundo em toda a tabela.

Uma vez que toda a tabela foi selecionada, você também pode usar a tecla Delete do teclado para limpar todos os dados existentes e retornar a uma tabela em branco.

Limpar conteúdo da tabela

Alinhamento de texto em tabelas

Selecione o cabeçalho de uma linha ou coluna, ou escolha uma única célula ou seleção de células. Em seguida, use a barra de ferramentas para ajustar o alinhamento horizontal e vertical do texto:

Alinhamento de texto

Com uma célula selecionada, pressione Enter/Return ou dê um duplo clique para editar o texto. Se simplesmente quiser substituir o texto, basta começar a digitar!

Enquanto estiver no modo de edição, você pode usar o editor de célula ou a barra de ferramentas da tabela para formatar, estilizar, colorir e destacar o texto selecionado, ou para adicionar links.

Enquanto estiver no modo de edição:

  • Pressione a tecla Tab para navegar rapidamente entre as células da tabela.
  • Pressione Shift + Tab para voltar à célula anterior.