Todos os sites modernos são projetados para funcionar corretamente em diversas larguras de tela. Antigamente, as tabelas eram criadas usando HTML simples. À medida que o web design flexível se tornou o novo padrão, as tabelas HTML básicas têm lutado para acompanhar as demandas dos sites modernos. Como as tabelas HTML simples não são responsivas, o texto nelas incluído é extremamente difícil de ler em tamanhos de tela de dispositivos móveis, por isso são utilizadas para desenvolver tabelas responsivas que adaptam seu layout dependendo do 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: Utilize plugin de tabela que incluem esta 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 diversificado, e isso pode ser conseguido com abordagens básicas de HTML e CSS. No entanto, se a tabela for destinada a conter uma quantidade considerável de dados, não será 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 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 site 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 diversas 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 possa 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 um esforço significativo e os requisitos podem variar 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 transbordam o contêiner da tabela, permitindo que a tabela responda melhor à entrada do usuário. Você pode descobrir mais acessando a página do tutorial:
Solução 2: Utilize plugin de tabela que incluem esta 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 GRATUITAS disponíveis no repositório. No entanto, é um pouco complicado encontrar plugin de tabela que tenham opções integradas de capacidade de resposta móvel. plugin populares como wpDataTables não possuem esse recurso como opção gratuita.
Neste artigo, consideramos um dos melhores plugin WP Tabe Builder.
WP Table Manager
WP Table Manager é o único plugin de tabela do WordPress que oferece uma interface de planilha completa 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 recursos poderosos de edição de tabelas, incluindo edição de células HTML, cópia de tabelas, cálculo 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 alterar uma tabela.
WP Table Manager permite criar 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 linda mesa que fica lindamente exibida em todos os dispositivos de qualquer tamanho. Então tudo que você precisa fazer é copiar o shortcode 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 estrelas, HTML personalizado e Shortcode) que você pode arrastar e soltar em espaços reservados 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 listas, etc.; este é o plugin de tabela que descobrimos durante nossa investigação ser o mais amigável para iniciantes. Tenha em mente que a versão atual não possui 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 excelentes opções.
Interface para o WP Table Manager
Você pode incluir o código de acesso em um módulo de código ou em um módulo de texto no Divi.
O tema DIVI inclui o WP Table Manager .
plugin WP Table Manager responde ao gerenciamento de detalhes quando se trata de manipulação de tabelas;
- Depois que a opção de filtro estiver ativada em sua tabela, você poderá pesquisar dados em cada coluna 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 organizarão os dados da sua tabela. A ordenação de dados de tabelas também funciona em tabelas grandes, incluindo paginação.
- Depois de construir sua tabela com todos os dados necessários, você poderá permitir que os usuários classifiquem, mas também poderá estabelecer uma ordem padrão. Isso pode ser bastante benéfico quando as informações mudam ao longo do 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 no frontend do seu site enquanto mantém os recursos do servidor. Selecione uma quantidade predefinida de linhas da tabela, em cada página.
Também existe uma maneira aberta de gerenciar documentos Excel por meio do importador de arquivos Excel WP Table Manager . No entanto, você só pode importar e transformar dados do Excel como uma tabela HTML editável ou importar o arquivo Excel com seu estilo incluindo cores, planos de fundo, tamanho de 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 WordPress ou de um cliente FTP. Em seguida, selecione seu arquivo Excel e inicie a sincronização nas 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 tabela enorme.
Após importar uma tabela, todos os dados poderão ser atualizados; esta é apenas uma tabela HTML comum editável como um plugin ! Planilha WordPress.
Por outro lado, após construir uma tabela organizada com todos os dados desejados, você pode exportá-la como um arquivo Excel convencional e, por amp , executar novamente a planilha Excel atualizada posteriormente. Seus usuários agora podem exportar a tabela como uma planilha Excel no frontend 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 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 Excel do Office 365 para sincronizar, ajustar automaticamente e ele estará disponível no seu site.
WP Table Manager ajuda a construir e importar tabelas do banco de dados; agora inclui uma ferramenta para geração de tabelas a partir de uma seleção de conteúdo de banco de dados de sites, que antes não estava disponível. Tabelas e colunas do banco de dados são selecionadas, filtros configuráveis são aplicados e 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 opções de classificação, filtragem, design automático e paginação à sua disposiçã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 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 é bastante benéfico em um vasto banco de dados. Além disso, um assistente está aqui para ajudá-lo passo a passo com a tabela do banco de dados.
No estágio final, antes de visualizar a tabela do banco de dados, você pode escrever sua consulta personalizada nas tabelas do banco de dados especificadas. Oferecemos suporte a algumas funções, como SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
Às vezes, uma tabela de banco de dados vem com muitas linhas; portanto, esta opção pode ajudar a exibir uma tabela que caiba na sua tela. Além disso, você pode definir uma quantidade predefinida de linhas da tabela, em 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 enormes dados da sua tabela, você pode criar algumas regras personalizadas para se concentrar em um objeto específico. Se você estiver familiarizado com ele, poderá brincar com os operadores de banco de dados como >, <, LIKE, IN…
As tabelas do banco de dados que você criou podem ser editadas como qualquer outra tabela (se o usuário tiver acesso a esse recurso sensato); isso é bastante conveniente para editar em lote alguns dados do banco de dados, como, por amp , várias datas pós-publicação que demorariam um pouco se fossem feitas uma por uma.
Conclusão
As tabelas são uma das maneiras mais eficazes de apresentar um conjunto de informações. Porém, para uma pessoa menos técnica criar tabelas em uma página web é um desafio. Usando esses plugin , você pode facilmente criar tabelas que podem ser lidas 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.
