WP Table Manager: Estilizando tabelas

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, etc. Isso pode ser aplicado a uma única célula ou a várias células

Você pode selecionar a porcentagem para o editor de tabelas. Isso significa que você pode aumentar ou diminuir o zoom da sua tabela, em uma faixa de 50% a 200%.

A altura da linha e a largura da coluna podem ser definidas em pixels. Para isso, acesse o menu Formatar > Aplicar tamanho de coluna/linha e selecione Redimensionar coluna / Redimensionar linha . Na janela que abrir, você poderá selecionar o intervalo e definir os valores em pixels para colunas ou linhas. Clique no Concluído para finalizar.

2. Temas e opções

Em cada tabela, você encontrará de seleção de tema no menu Tema. Basta clicar em um tema para aplicá-lo.

Cores alternativas

No mesmo menu Tema > Cores alternativas , o recurso "Estilo automático" permite colorir as linhas da sua tabela com para cabeçalho e rodapé . Você pode selecionar os estilos de modelo ou criar os seus próprios nas configurações do plugin.

Você pode remover a cor alternativa clicando na "Remover >  Remover estilo automático" no menu de contexto (clique com o botão direito do mouse). A cor será removida após a sua confirmação.

Alinhamento da tabela

O alinhamento da tabela serve para alinhar a div que contém toda a tabela, centralizando todo o conteúdo, por exemplo. Você pode encontrar essa opção em Formatar > Alinhamento da tabela .

Realce de célula

O destaque de células também está disponível como opção. Você pode habilitar esse recurso na configuração. Ele está desabilitado por padrão. Você pode selecionar a linha de destaque para ajustar a cor e a opacidade do destaque.

3. Adicionar dicas de ferramentas às 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 do mouse sobre ela.

Você pode definir a largura da dica de ferramenta em pixels. Isso abrirá uma dica de ferramenta com um editor para edição.

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

4. Congelamento de linhas e colunas

Congelamento da coluna

O congelamento de colunas está disponível no menu Formatar > Opções responsivas . Você pode congelar até 5 colunas, contando a partir da primeira.

Para congelar colunas/linhas, existe uma opção adicional que permite fixar a altura da tabela (já que o contêiner da tabela pode ter altura infinita).

Depois de selecionar a coluna que deseja congelar, você poderá rolar a tabela e sempre exibirá a coluna fixa.

congelamento de fileiras

Você pode encontrar essa opção em Menu Formatar > Cabeçalho da tabela . A partir daí, você pode ativá-la e definir o número de linhas a serem congeladas (até 5 linhas).

Se você deseja definir a altura da tabela, volte às opções Responsivas.

Em seguida, a primeira linha será congelada no frontend de acordo com a configuração.

5. Classificar e Filtrar

Se você deseja classificar ou filtrar sua tabela, acesse o menu opção Classificar e filtros

Em seguida, uma janela pop-up aparece contendo opções de classificação e filtro. 

Se você deseja classificar uma tabela, basta ativar de classificação no frontend . Você pode selecionar uma coluna para a classificação padrão e a direção da ordenação.

Por exemplo, neste caso, selecione a coluna A com ASC .

Existem 2 opções de filtro:

• Na coluna interna: você pode filtrar os dados no cabeçalho de cada coluna. O botão de alternância permite mostrar ou ocultar o campo de pesquisa no cabeçalho.

• Formulário de filtro avançado: após selecionar a opção, você pode pesquisar e filtrar dados em uma tabela.

Pesquisa principal: Ao ativar este recurso, um campo de entrada de pesquisa será adicionado à interface. Isso permite que os usuários pesquisem facilmente todos os dados da tabela.

6. Preenchimento de célula e raio da borda

Você pode encontrar o ícone de borda na barra de ferramentas, que ajuda a ajustar o espaçamento interno e o raio da borda da célula.

7. CSS personalizado

Vamos um passo além. Se você for um web designer com conhecimentos de CSS, poderá adicionar CSS em Formatar Menu > CSS Personalizado.

O código CSS é colorido usando o recurso "code mirror" e pode ser escrito em Less CSS, também funciona!

Células, linhas e colunas possuem coordenadas para identificar cada uma e aplicar CSS personalizado. R representa a linha e C a coluna.

8. Tabelas Responsivas do WordPress

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

Escondendo colunas

WP Table Manager lida com o design responsivo com uma ferramenta de prioridade, como uma opção. Por padrão, o recurso responsivo está desativado, o que resultará em conteúdo que ultrapassa os limites (mas funciona muito bem em dispositivos móveis). Para usar "Ocultar colunas" , você deve acessar Formatar menu > Opções responsivas.

O modo responsivo é avançado, permitindo definir uma prioridade para ocultar colunas em telas de dispositivos móveis. Quando as colunas estão ocultas, um menu para dispositivos móveis 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, haverá um estouro de conteúdo e você poderá rolar facilmente em dispositivos móveis.

Tabela com barra de rolagem (melhor para um número reduzido de colunas)

Tabela com coluna oculta (melhor para um grande número de colunas)

Cabeçalho repetido

Esta é outra opção se você quiser inserir uma tabela em uma área pequena do seu site. Você deve navegar até Formato do Menu > Opções Responsivas. Em seguida, selecione Tipo Responsivo > Cabeçalho Repetido.

Haverá opções de personalização de acordo com a sua necessidade:

• Ponto de interrupção responsivo (px): Selecione um valor de ponto de interrupção em pixels para definir quando a tabela alternará para este modo responsivo.
• Altura máxima responsiva (px): Quando o modo responsivo está ativado, dependendo do valor do breakpoint, defina uma altura máxima para evitar tabelas muito longas.
• Estilo do modo responsivo: Aplique um estilo padrão para este modo responsivo ou use as cores da tabela.

Depois disso, você poderá ver como a tabela ficará na interface do usuário.

Se você estiver usando o cabeçalho repetido e de filtro estiver ativada, poderá filtrar digitando na caixa de texto na visualização para dispositivos móveis.

9. Exportar para o Excel

Para salvar sua tabela no seu computador, acesse o menu Tabela e clique na Exportar para Excel . O tipo de arquivo será *.xlsx após a exportação.

10. Paginação

Você encontra essa função em Menu Formatar > Paginação em cada edição da tabela. Use o botão de alternância para ativar e selecione o número de linhas a serem exibidas por página.

11. Estilização das bordas das células

Você pode aplicar tipos de borda à sua tabela, como largura, cor e estilo. Primeiro, selecione o intervalo de células e, em seguida, clique no ícone na barra de ferramentas.

12. Imprimir tabela na interface

Às vezes, você precisa imprimir sua tabela. Para exibir o botão Imprimir na interface, primeiro você deve acessar o Menu Tabela e marcar a opção Imprimir.