Todos os sites modernos são projetados para funcionar corretamente em uma variedade de larguras de tela. Antigamente, as tabelas eram criadas usando HTML simples. Como o design flexível da web se tornou o novo padrão, as tabelas HTML básicas têm se esforçado para acompanhar as demandas dos sites modernos. Como as tabelas HTML simples não são responsivas, o texto incluído nelas é extremamente difícil de ler em tamanhos de tela de dispositivos móveis, por isso são usadas para desenvolver tabelas responsivas que adaptam seu layout de acordo com o tamanho da tela em que estão sendo visualizadas, As consultas de mídia HTML e CSS devem ser usadas em conjunto.
- Solução 1: As tabelas podem ser criadas usando o Divi Builder.
- Solução 2: Faça uso de plugin de tabela que incluem essa funcionalidade por padrão!
- WP Table Manager
- Interface para o WP Table Manager
- Conclusão
As tabelas podem ser construídas com um layout legível em todos os tamanhos de tela para um único conjunto de informações que não seja muito grande ou diverso, e isso pode ser feito com abordagens básicas de HTML e CSS. No entanto, se a tabela se destina a conter uma quantidade considerável de dados, não é fácil construir um layout legível em dispositivos móveis ou telas com largura inferior a 786 pixels.
Se o web designer que trabalha com HTML e CSS para tornar uma tabela responsiva em todos os tamanhos de tela não considera a quantidade de dados, é provável que encontre problemas que afetam significativamente a legibilidade do conteúdo do site. Aqui estão algumas sugestões que você, como designer de sites da Divi, pode colocar em prática ao tentar criar tabelas responsivas manualmente.
Ao reduzir o tamanho da tabela para acomodar uma tela menor, você precisará construir várias classes CSS, com cada classe visando uma resolução de tela específica.
Uma solução alternativa que você pode fazer é ocultar colunas específicas da tabela quando o tamanho da tela for menor.
Para telas menores, você pode incluir rolagens horizontais ou verticais nos cabeçalhos e rodapés da tabela.
Crie uma única tabela que pode ser dimensionada para caber em todos os tamanhos de tela e amplie a tabela para tornar o material mais legível.
Essas soluções exigem uma quantidade significativa de esforço e os requisitos podem diferir dependendo do conteúdo e do tamanho da tela.
Solução 1: As tabelas podem ser criadas usando o Divi Builder.
Elegant Themes produziu um tutorial para demonstrar como construir tabelas responsivas usando os recursos integrados do Divi. Confira aqui. Eles adicionaram recursos de rolagem horizontal às colunas que excedem o contêiner da tabela, permitindo que a tabela seja mais responsiva à entrada do usuário. Você pode descobrir mais acessando a página do tutorial:
Solução 2: Faça uso de plugin de tabela que incluem essa funcionalidade por padrão!
Criar uma tabela responsiva para o seu site Divi não é mais um problema, graças à abundância de soluções de plugin GRATUITAS disponíveis no repo. No entanto, é um pouco complicado encontrar plugin tabela que tenham opções de responsividade móvel integradas. plugin populares como wpDataTables não têm esse recurso como uma opção gratuita.
Neste artigo, consideramos um dos melhores o plugin WP Tabe Builder.
WP Table Manager
WP Table Manager é o único plugin tabela do WordPress que oferece uma interface de planilha inteira para gerenciar tabelas. Crie uma tabela, selecione um tema e comece a editar as tabelas assim que terminar de criá-las. Você se beneficiará de um conjunto abrangente de poderosos recursos de edição de tabela, incluindo edição de células HTML, cópia de tabela, computação e sincronização com Excel, Planilhas Google e Office 365; é tão simples quanto clicar em uma célula e editar dados com ou sem a ajuda de um editor de texto visual para que o usuário final altere uma tabela.
WP Table Manager permite que você crie tabelas atraentes e responsivas usando uma interface visual simples. É de uso gratuito. Depois de ativá-lo, você será direcionado para o guia de configuração. Siga os procedimentos e faça os ajustes necessários ao seu gosto. Como num passe de mágica, você criou uma bela mesa que é exibida lindamente em qualquer dispositivo de qualquer tamanho. Em seguida, tudo o que você precisa fazer é copiar o código de acesso e colá-lo na página onde deseja que apareça. O construtor oferece atualmente sete elementos (Texto, Imagem, Lista, Botão, Classificação por Estrela, HTML Customizado e Código Abreviado) que você pode arrastar e soltar em marcadores de posição de tabela usando o recurso arrastar e soltar. Eles podem ser usados para construir vários tipos de tabelas, como tabelas de comparação de produtos, tabelas de preços, tabelas de lista, etc .; este é o plugin tabela que descobrimos durante nossa investigação ser o mais amigável para novatos. Lembre-se de que a versão atual não possui um campo de pesquisa ou qualquer outro tipo de funcionalidade de filtragem. Além disso, se você pretende inserir ou gerenciar muitos conjuntos de dados, esta pode não ser a opção ideal. Para este tipo de cenário de uso, Visualizer ou Tablepress são escolhas excelentes.
Interface para o WP Table Manager
Você pode incluir o código de acesso em um módulo de código ou um módulo de texto no Divi.
O tema DIVI inclui o WP Table Manager .
WP Table Manager plugin WP Table Manager responde ao gerenciamento de detalhes quando se trata de manipulação de tabelas;
- Uma vez que a opção de filtro é ativada em sua tabela, você pode pesquisar cada coluna para dados e filtrar a tabela inteira. Também funciona em tabelas enormes, incluindo paginação
- As setas para cima e para baixo apresentadas em cada coluna irão organizar os dados da sua tabela. A ordenação de dados de tabela também funciona em tabelas enormes, incluindo paginação.
- Depois de construir sua tabela com todos os dados de que precisa, você pode permitir que os usuários classifiquem, mas também pode estabelecer uma ordem padrão. Isso pode ser muito benéfico quando as informações mudam com o tempo, já que você pode classificar os corredores após a corrida por ordem de chegada.
- A paginação é necessária se você deseja exibir uma grande tabela no front-end do seu site enquanto mantém os recursos do servidor. Selecione uma quantidade predefinida de linhas da tabela, cada página.
Há também uma maneira aberta de gerenciar documentos Excel por meio do importador de arquivos WP Table Manager Excel. No entanto, você só pode importar e transformar dados do Excel como uma tabela HTML editável ou importar o arquivo do Excel com seu estilo incluindo cores, planos de fundo, tamanho da coluna, links.
Gerencie sua tabela Excel e publique-a em seu site WordPress! Você pode fazer upload de um arquivo Excel para a mesa por meio do gerenciamento de mídia do WordPress ou de um cliente FTP. Em seguida, selecione seu arquivo Excel e inicie a sincronização a partir das configurações da tabela.
A sincronização entre sua tabela WordPress e o arquivo Excel pode ser feita regularmente, entre um minuto e um dia. O atraso de sincronização automática também pode ser definido para evitar atualizações indesejadas de tabelas públicas do WordPress ou para economizar recursos do servidor para uma grande mesa.
Depois de importar uma tabela, todos os dados podem ser atualizados; esta é apenas uma tabela HTML comum editável como um plugin ! Planilha WordPress.
Por outro lado, depois de construir uma mesa arrumada com todos os dados que você quer, você pode exportá-lo como um arquivo Excel convencional e, por ex amp le, re-executar a folha de Excel são atualizadas mais tarde. Seus usuários agora podem exportar a tabela como uma planilha do Excel no frontend do WordPress.
O WP Table Manager também sincroniza com o Office 365 por meio do OneDrive.
A ferramenta de importação e exportação de arquivos do OneDrive Excel está disponível; economize tempo importando e modificando seus arquivos durante a execução. Seja ainda mais produtivo com a sincronização de arquivos do OneDrive! Selecione um arquivo do Office 365 Excel para sincronizar, ajustar automaticamente e ele estará ativo no seu site.
WP Table Manager ajuda a construir e importar guias do banco de dados; agora inclui uma ferramenta para gerar tabelas a partir de uma seleção de conteúdo de banco de dados de site, que antes não estava disponível. As tabelas e colunas do banco de dados são selecionadas, filtros configuráveis são aplicados e as tabelas são gerenciadas por meio da interface do WP Table manager . Quando o banco de dados é atualizado, sua tabela é incrementada automaticamente! Além disso, você tem opções de classificação, filtragem, design automático e paginação à sua disposição.
Se você não for um desenvolvedor, pode conectar visualmente qualquer material de banco de dados à sua tabela HTML. Todas as tabelas em seu banco de dados são apresentadas durante a geração de uma nova tabela a partir do conteúdo do banco de dados.
O banco de dados do seu site pode fazer uma pesquisa simples e selecionar suas tabelas e colunas; isso é muito benéfico em um vasto banco de dados. Além disso, um assistente está aqui para ajudá-lo com a tabela do banco de dados passo a passo.
No estágio final, antes de visualizar a tabela do banco de dados, você pode escrever sua consulta customizada nas tabelas de banco de dados especificadas. Suportamos algumas funções, como SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
Uma tabela de banco de dados às vezes vem com muitas linhas; portanto, esta opção pode ajudar a exibir uma tabela que cabe na sua tela. Além disso, você pode definir uma quantidade predefinida de linhas da tabela, a cada página. Além disso, você também pode escolher uma coluna para classificar a tabela inteira por padrão.
A conexão da tabela de banco de dados do WordPress não se limita apenas às tabelas do WordPress. Todas as tabelas que não são do WordPress, mas instaladas no mesmo banco de dados, podem ser conectadas.
Entre os dados massivos em sua tabela, você pode criar algumas regras personalizadas para se concentrar em um objeto específico. Se você está familiarizado com isso, pode brincar com os operadores de banco de dados como>, <, LIKE, IN ...
As tabelas do banco de dados que você criou podem ser editadas como quaisquer outras tabelas (se o usuário tiver acesso a esse recurso sensível) (se o usuário tiver acesso a esse recurso prático); isso é muito conveniente para editar lote alguns dados do banco de dados como, por ex amp le, várias datas pós-publicação que teriam levado um tempo, se um feito por um.
Conclusão
As tabelas são uma das maneiras mais eficazes de apresentar um conjunto de informações. No entanto, para uma pessoa menos técnica, criar tabelas em uma página da web é um desafio. Usando esses plugin , você pode criar tabelas facilmente legíveis em qualquer dispositivo em apenas algumas etapas simples. Além disso, as tabelas responsivas certamente proporcionarão experiências gerais positivas aos visitantes do seu site. Então, experimente e conte-nos sua experiência na seção de comentários abaixo.
