Todos os sites modernos são projetados para funcionar corretamente em uma variedade de tamanhos de tela. Antigamente, as tabelas eram criadas usando HTML puro. Com o design web flexível se tornando o novo padrão, as tabelas HTML básicas têm dificuldade em acompanhar as demandas dos sites modernos. Como as tabelas HTML simples não são responsivas, o texto nelas contido é extremamente difícil de ler em telas de dispositivos móveis. Por isso, para desenvolver tabelas responsivas que adaptam seu layout de acordo com o tamanho da tela em que estão sendo visualizadas, é necessário usar HTML e media queries em conjunto.
- Solução 1: É possível criar tabelas usando o Divi Builder.
- Solução 2: Utilize pluginde tabela que incluam essa funcionalidade por padrão!
- WP Table Manager
- Interface para o WP Table Manager
- Conclusão
É possível construir tabelas com um layout legível em todos os tamanhos de tela para um único conjunto de informações que não seja muito extenso ou diversificado, 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 criar um layout legível em dispositivos móveis ou telas com largura inferior a 786 pixels.
Se o designer web que trabalha com HTML e CSS para tornar uma tabela responsiva em todos os tamanhos de tela não considerar a quantidade de dados, provavelmente encontrará problemas que impactarão significativamente a legibilidade do conteúdo do site. Aqui estão algumas sugestões que você, como designer de sites Divi, pode colocar em prática ao tentar criar tabelas responsivas manualmente.
Ao reduzir o tamanho da tabela para adequá-la a uma tela menor, você precisará criar várias classes CSS, cada uma direcionada a uma resolução de tela específica.
Uma solução alternativa que você pode adotar é ocultar colunas específicas da tabela quando o tamanho da tela for menor.
Para telas menores, você pode incluir barras de rolagem horizontais ou verticais nos cabeçalhos e rodapés das tabelas.
Crie uma única tabela que possa ser redimensionada para se ajustar a todos os tamanhos de tela e aplique zoom na tabela para tornar o conteúdo mais legível.
Essas soluções exigem um esforço considerável, e os requisitos podem variar dependendo do conteúdo e do tamanho da tela.
Solução 1: É possível criar tabelas usando o Divi Builder.
A Elegant Themes criou um tutorial que demonstra como construir tabelas responsivas usando os recursos integrados do Divi. Confira aqui. Eles adicionaram rolagem horizontal às colunas que ultrapassam os limites do contêiner da tabela, permitindo que ela se adapte melhor à interação do usuário. Você pode encontrar mais informações na página do tutorial:
Solução 2: Utilize pluginde tabela que incluam 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 plugin GRATUITOS disponíveis no repositório. No entanto, pode ser um pouco complicado encontrar pluginde tabela com opções de responsividade para dispositivos móveis integradas. pluginpopulares como o wpDataTables não oferecem esse recurso gratuitamente.
Neste artigo, analisamos um dos melhores plugindisponíveis: o WP Table Builder.
WP Table Manager
WP Table Manager é o único plugin de tabelas para WordPress que oferece uma interface completa de planilha para gerenciar tabelas. Crie uma tabela, selecione um tema e comece a editá-la assim que terminar. Você se beneficiará de um conjunto abrangente de recursos poderosos de edição de tabelas, incluindo edição de células HTML, cópia de tabelas, cálculos e sincronização com Excel, Planilhas Google e Office 365; é tão simples quanto clicar em uma célula e editar os dados, com ou sem a ajuda de um editor de texto visual para o usuário final.
WP Table Manager permite criar tabelas atraentes e responsivas usando uma interface visual simples. É gratuito. Após a ativação, 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ê terá criado uma tabela bonita que se adapta perfeitamente a qualquer dispositivo, independentemente do tamanho. Em seguida, basta copiar o shortcode e colá-lo na página onde deseja que a tabela apareça. O construtor oferece atualmente sete elementos (Texto, Imagem, Lista, Botão, Classificação por Estrelas, HTML Personalizado e Shortcode) que podem ser arrastados e soltos nos espaços reservados da tabela. Esses elementos podem ser usados para criar diversos tipos de tabelas, como tabelas de comparação de produtos, tabelas de preços, listas, etc. Este é o plugin de tabelas que consideramos mais fácil de usar para iniciantes durante nossa pesquisa. Observe 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 esse tipo de cenário de uso, tanto o Visualizer quanto o Tablepress são excelentes opções.
Interface para o WP Table Manager
Você pode incluir o shortcode tanto em um módulo de código quanto em um módulo de texto no Divi.
O tema DIVI inclui o WP Table Manager.
plugin WP Table Manager é a solução para gerenciar detalhes no manuseio de tabelas;
- Uma vez que a opção de filtro esteja ativada em sua tabela, você poderá pesquisar dados em cada coluna e filtrar a tabela inteira. Ela também funciona em tabelas muito grandes, incluindo paginação
- As setas para cima e para baixo presentes em cada coluna organizam os dados da tabela. A ordenação dos dados funciona mesmo em tabelas muito grandes, incluindo a paginação.
- Depois de criar sua tabela com todos os dados necessários, você pode permitir que os usuários a classifiquem, mas também pode definir uma ordem padrão. Isso pode ser muito útil quando as informações mudam com o tempo, pois você pode classificar os corredores após a corrida por ordem de chegada.
- A paginação é necessária se você deseja exibir uma tabela grande na interface do seu site, mantendo os recursos do servidor em bom estado. Selecione uma quantidade predefinida de linhas para cada página da tabela.
Existe também uma forma aberta de gerenciar documentos do Excel através do importador de arquivos do Excel do WP Table Manager . 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 das colunas e links.
Gerencie sua planilha do Excel e publique-a em seu site WordPress! Você pode fazer o upload de um arquivo do Excel para a planilha através do gerenciamento de mídia do WordPress ou de um cliente FTP. Em seguida, selecione seu arquivo do Excel e inicie a sincronização nas configurações da planilha.
A sincronização entre sua tabela do WordPress e o arquivo do Excel pode ser feita regularmente, com intervalos de um minuto a um dia. O atraso na sincronização automática também pode ser definido para evitar atualizações indesejadas da tabela pública do WordPress ou para economizar recursos do servidor em tabelas muito grandes.
Após importar uma tabela, todos os dados podem ser atualizados; trata-se de uma tabela HTML comum, editável como um plugin! Planilha do WordPress.
Por outro lado, depois de criar uma tabela organizada com todos os dados desejados, você pode exportá-la como um arquivo Excel convencional e, poramp, executar a planilha atualizada posteriormente. Seus usuários agora podem exportar a tabela como uma planilha do Excel no front-end do WordPress.
O WP Table Manager também sincroniza com o Office 365 através do OneDrive.
A ferramenta de importação e exportação de arquivos do Excel no OneDrive está disponível; economize tempo importando e modificando seus arquivos em qualquer lugar. Aumente ainda mais a produtividade com a sincronização de arquivos do OneDrive! Selecione um arquivo do Excel do Office 365 para sincronizar, ajuste-o automaticamente e ele estará disponível no seu site.
WP Table Manager ajuda você a criar e importar tabelas do banco de dados; agora ele inclui uma ferramenta para gerar tabelas a partir de uma seleção de conteúdo do banco de dados do site, algo que não estava disponível anteriormente. Tabelas e colunas do banco de dados são selecionadas, filtros configuráveis são aplicados e as tabelas são gerenciadas através da interface WP Table manager . Quando o banco de dados é atualizado, sua tabela é incrementada automaticamente! Além disso, você tem à sua disposição opções de classificação, filtragem, design automático e paginação.
Se você não for um desenvolvedor, poderá conectar visualmente qualquer material do banco de dados à sua tabela HTML. Todas as tabelas do seu banco de dados são exibidas ao gerar uma nova tabela a partir do conteúdo do banco de dados.
O banco de dados do seu site pode realizar uma busca simples e selecionar suas tabelas e colunas; isso é bastante útil em um banco de dados extenso. Além disso, um assistente está disponível para ajudá-lo com a seleção de tabelas no banco de dados, passo a passo.
Na etapa final, antes de visualizar a tabela do banco de dados, você pode escrever sua consulta personalizada nas tabelas especificadas. Oferecemos suporte a algumas funções, como SELECT, REPLACE, RENAME, SHOW, EXPLAIN e DESCRIBE.
Uma tabela de banco de dados às vezes possui muitas linhas; portanto, essa opção pode ajudar a exibir uma tabela que se ajuste à sua tela. Além disso, você pode definir uma quantidade predefinida de linhas para a tabela em cada página. Ademais, você também pode escolher uma coluna para classificar toda a tabela por padrão.
A conexão com tabelas do 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 estão instaladas no mesmo banco de dados, podem ser conectadas.
Em meio à enorme quantidade de dados em sua tabela, você pode criar algumas regras personalizadas para se concentrar em um objeto específico. Se você estiver familiarizado com isso, pode usar 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); isso é bastante conveniente para editar em lote alguns dados do banco de dados, como, poramp, várias datas pós-publicação, o que levaria muito tempo se fosse feito uma por uma.
Conclusão
As tabelas são uma das maneiras mais eficazes de apresentar um conjunto de informações. No entanto, para quem não tem muita experiência técnica, criar tabelas em uma página da web pode ser um desafio. Usando esses plugin, você pode facilmente criar tabelas legíveis em qualquer dispositivo em apenas alguns passos simples. Além disso, tabelas responsivas certamente proporcionarão uma experiência geral positiva para os visitantes do seu site. Então, experimente e conte-nos sua experiência na seção de comentários abaixo.
