WP Table Manager : tabelas de estilo

1. Formato

Na barra de ferramentas, você pode definir o estilo da célula como: fonte, tamanho da fonte, estilo do texto, cor de fundo da célula, cor do texto, alinhamento horizontal e vertical da célula, ... Pode ser aplicado para uma única célula ou várias células

 

mesa de estilo

 

A altura da linha e a largura da coluna podem ser definidas em pixels. Vá para Formato de menu> Aplicar tamanho de coluna / linha e selecione Redimensionar coluna / Redimensionar linha . Na janela pop-up, você pode selecionar intervalo e definir px para colunas ou linhas. Clique no botão Concluído para terminar.

 

redimensionar coluna

 

2. Opções de tema e classificação

Em cada mesa, você pode encontrar a opção de seleção de tema no Menu Tema. Basta clicar em um tema para aplicá-lo.

A aplicação de um tema substituirá todos os dados e estilo de sua tabela. Portanto, a maneira de proceder é aplicar um tema e editar os dados para criar seu próprio tema e, em seguida, duplicar suas tabelas.

 

escolha do tema

 

No mesmo Tema de menu> Cores alternativas , o recurso "Estilo automático" ajuda a colorir a linha em sua mesa com opções de estilo de cabeçalho e rodapé . Você pode selecionar os estilos de modelo ou fazer o seu próprio nas configurações do plugin.

 

tema-alterar-cor

 

O parâmetro classificável permite que você faça a classificação de dados AJAX no frontend. Você pode ver no menu Formato> Classificar .

 

tabela de classificação

 

O alinhamento da tabela é sobre alinhar o div que contém a tabela inteira, centralizar toda a tabela por exemplo. Você pode encontrar em Menu Format> Table align .

 

alinhar tabela

 

Um destaque de célula também está disponível como opção. Você pode ativar esse recurso na configuração. É desativado por padrão. Você pode selecionar a linha de destaque para ajustar a cor e a opacidade do realce.

 

destaque da tabela

 

3. Adicionar dica de ferramenta nas células

Em cada célula de uma tabela, você pode ver a opção Adicionar dica de ferramenta ao clicar com o botão direito nela.

 

add-tooltip

 

Você pode definir a largura da dica de ferramenta em pixels. Isso o levará a uma dica de ferramenta com um editor para editar.

 

editor de dicas de ferramentas

 

Adicione conteúdo e salve, pronto, a dica será exibida no lado público ao passar o mouse.

 

tooltip-hover

 

4. Congelamento de linha e coluna

Congelamento de coluna

O congelamento de coluna está disponível nas opções Formato de menu > Responsivo . Você pode congelar até 5 colunas. É contado a partir do primeiro col.

 

coluna congelada

 

Para fazer o congelamento de coluna / linha, há uma opção adicional que permite fixar a altura da mesa (porque o contêiner da mesa pode ter uma altura infinita).

 

altura da mesa

 

Depois de escolher a coluna a congelar, você poderá rolar pela tabela e sempre exibir a coluna fixa.

 

exibição de linha fixa

Linha congelada

Você pode encontrá-lo em Formato de menu> Cabeçalho da tabela , a partir daqui você pode ativar a opção e definir linhas para congelar (até 5 linhas).

 

row-freeze-table-header

 

Se você quiser definir a altura da mesa, volte para as opções responsivas.

Então a primeira linha será congelada no frontend seguindo a configuração.

 

congelamento de linha

 

5. Filtrando dados da coluna

Uma opção de filtragem está disponível em Formato de menu  > Filtros . Você pode ativá-lo clicando para habilitar os campos de filtragem de dados públicos.

 

coluna de filtro

 

Exemplo de filtros:

 

rolagem de tabela responsiva

 

6. Preenchimento da célula e raio da borda

Você pode encontrar o ícone de borda na barra de ferramentas que ajuda a ajustar o preenchimento e o raio da borda na célula.

 

borda de preenchimento

 

Observe que, se você aplicou um tema, alguns css personalizados serão adicionados automaticamente. Você ainda pode editá-lo, é claro.

 

7. CSS personalizado

Vamos dar um passo além. Se você for um web designer com habilidades em CSS, poderá adicionar CSS em Menu Format> Custom CSS.

 

formato-custom-css

 

O código CSS é colorido usando espelho de código e pode ser escrito em menos CSS, ele também funciona!

 

tabela-personalizada-css

 

Células, linhas, colunas têm coordenadas para identificar cada uma e aplicar css personalizadas. R é linha, C é coluna.

 

exibição de css

 

8. Tabelas WordPress responsivas

Minhas tabelas são responsivas ou usam a rolagem em dispositivos pequenos?

Escondendo Cols

WP Table Manager trata do design responsivo com uma ferramenta prioritária, opcionalmente. Por padrão, o recurso responsivo está desabilitado, haverá um estouro (que funciona muito bem no celular). Para usar a opção Hiding Cols , você deve ir ao Menu Format> Responsive options.

 

responsivo-escondendo-col

 

O modo responsivo é avançado, você pode definir uma prioridade para ocultar colunas em tamanhos móveis.
Quando as colunas estão ocultas, um menu móvel com uma caixa de seleção será exibido para forçar a exibição / ocultação das colunas. O tamanho da coluna é fixo durante a edição da tabela. Se o tamanho de todas as colunas for muito grande para o contêiner, você terá um estouro e poderá rolar facilmente em dispositivos móveis.

Tabela com rolagem (melhor para uma pequena quantidade de colunas)

 

rolagem de tabela responsiva

 

Tabela com coluna oculta (melhor para uma grande quantidade de colunas)

 

57bb0cb0ac948

 

Cabeçalho repetido

Esta é outra opção se você deseja inserir uma tabela em uma pequena área do seu site. Você deve navegar para Formato de menu> Opções responsivas. Em seguida, selecione Tipo de resposta> Cabeçalho repetido.

 

cabeçalho repetido

Haverá opções para personalizar de acordo com sua demanda:

  • Ponto de interrupção responsivo (px): Selecione um valor de ponto de interrupção em pixel para definir quando a tabela irá alternar para este modo responsivo
  • Altura máxima responsiva (px): quando o modo responsivo é ativado, dependendo do valor do ponto de interrupção, defina uma altura máxima para evitar uma mesa muito longa
  • Estilo do modo responsivo: aplique um estilo padrão para este modo responsivo ou use as cores da tabela

Depois disso, você pode ver como a mesa ficará no frontend.

 

repetido-cabeçalho-frontend

 

 

9. Baixar tabela

Para compartilhar sua mesa com o público, você deve habilitar a opção do botão Download na guia Mesa no painel direito. O tipo de arquivo será * .xlsx.

 

tabela de download

 

10. Paginação

Você pode encontrar esse recurso em Menu> guia Formatar em cada tabela. Use o botão de alternância para ativar e escolher o número de linhas a serem exibidas em uma página.

 

pagination-wptm