Como criar tabelas responsivas no WordPress
Publicados: 2023-02-12As tabelas são um elemento de design do site que pode ajudá-lo a exibir com elegância grandes quantidades de informações de maneira organizada. Eles funcionam muito bem em monitores de computador tradicionais, mas muitas vezes podem criar uma experiência indesejável em dispositivos móveis.
Felizmente, existem várias soluções viáveis para criar tabelas mais responsivas. O uso dessas práticas de design responsivo pode melhorar a experiência do usuário (UX) do seu site. Isso significa que os visitantes poderão visualizar e acessar mais facilmente os dados em suas tabelas, independentemente do tipo de dispositivo que estiverem usando.
Neste artigo, veremos o que significa tornar uma tabela responsiva. Em seguida, veremos duas maneiras de criar tabelas responsivas no WordPress. Vamos mergulhar de cabeça!
O que são tabelas responsivas?
Normalmente, o objetivo de uma tabela é exibir muitos dados de uma forma que faça sentido. Quando você tenta visualizar uma mesa em um dispositivo móvel, no entanto, as coisas podem dar errado. Isso acontece porque as linhas da tabela geralmente têm muitas colunas mais largas do que a exibição da tela pode suportar.
Ao criar uma tabela responsiva, você está essencialmente criando um conjunto de regras para sua tabela de dados original. Essas regras podem determinar pontos de interrupção com base no tamanho da tela. Isso significa que, se um usuário acessar a tabela em um dispositivo menor que o ponto de interrupção definido, o layout da tabela responderá reformatando para caber no tamanho da tela.
As tabelas responsivas geralmente podem ser reformatadas adicionando uma barra de rolagem ou empilhando as informações. Você não quer apenas encolher e amontoar as informações nas células à medida que o tamanho da tela muda, pois isso pode tornar a tabela ilegível. Felizmente, o design responsivo não é muito difícil de alcançar.
Como fazer uma tabela responsiva (sem um plug-in)
Existem essencialmente duas abordagens para tornar uma tabela responsiva no WordPress. Primeiro, veremos como fazer o trabalho sem um plug-in.
Isso exigirá algum conhecimento de codificação: especificamente, uma compreensão de Cascading Style Sheets (CSS). Também recomendamos trabalhar em um ambiente de preparação ou desenvolvimento em vez de em seu site ativo, até que você crie uma tabela que funcione de maneira confiável.
Etapa 1: formate sua tabela para CSS responsivo
Neste exemplo, vamos dizer aos dados da nossa tabela de exemplo para reformatar em um ponto de interrupção específico. Você pode simplesmente adicionar uma barra de rolagem a uma tabela em alguns casos, mas na verdade vamos agrupar os dados da tabela para que apareçam em um formato mais legível que elimine a necessidade de rolagem horizontal.
Essa é uma ótima abordagem, pois a rolagem horizontal geralmente significa que você está visualizando os dados de uma coluna fora de contexto:
Para que esta tabela funcione melhor, primeiro você precisa ter certeza de que sua tabela está formatada corretamente. Se você estiver criando uma tabela usando o Block Editor, você pode fazer isso normalmente e adicionar os atributos <thead> e <tbody> para garantir que seu CSS funcione corretamente:
Depois de adicionar a tabela, você pode usar o editor de HTML para ajustar sua formatação. Seu atributo <thead></thead> precisa envolver todos os cabeçalhos de coluna. Da mesma forma, você agrupará todos os dados subsequentes da tabela no atributo <tbody></tbody>.
Depois de adicionar a tag CSS na próxima etapa, suas folhas de estilo poderão entender o que deve ser exibido como cabeçalhos para cada coluna da tabela e qual é o corpo ou o conteúdo da célula.
Etapa 2: adicionar uma tag personalizada ao seu CSS
Em seguida, vamos usar um trecho de código CSS personalizado e o tema WordPress Twenty Nineteen. Este tema tem um design bastante responsivo como parte de seu código nativo, mas nossos ajustes de CSS levarão isso ainda mais longe.
Como todos os temas são diferentes, você deve entender completamente a estrutura do seu tema para implementar com sucesso um design de tabela responsivo. Alguns temas podem exigir uma biblioteca JavaScript adicional.
Para nosso exemplo, navegaremos até Aparência > Personalizar > CSS adicional , onde podemos adicionar o seguinte código CSS personalizado:

@media screen and (max-width: 600px) { | |
table {width:100%;} | |
thead {display: none;} | |
tr:nth-of-type(2n) {background-color: inherit;} | |
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
tbody td {display: block; text-align:center;} | |
tbody td:before { | |
content: attr(data-th); | |
display: block; | |
text-align:center; | |
} | |
} |
Depois de colar seu próprio código no editor, você precisará selecionar Publicar para que suas alterações entrem em vigor.
Etapa 3: testar a capacidade de resposta da tabela no WordPress
O WordPress possui um recurso útil de teste de tela integrado que permite testar seu conteúdo em três tamanhos de tela diferentes. Na parte inferior da tela onde você adicionou seu CSS personalizado, você pode clicar nos ícones do tablet ou celular para testar o novo estilo da sua tabela:
Para este exemplo, já criamos uma tabela simples que contém todos os atributos HTML necessários para trabalhar com nosso CSS. Nosso ponto de interrupção no CSS é definido como 600px, mas isso pode ser alterado para atender às suas necessidades.
Em vez de adicionar uma barra de rolagem ou compactar os dados da tabela, o CSS que adicionamos reorganiza os dados em um formato compatível com dispositivos móveis. Isso permite que o usuário em um dispositivo móvel role verticalmente e exiba os dados da tabela em contexto com o restante das células relacionadas.
Como fazer uma tabela responsiva com um plugin
Se você não se sentir confortável em personalizar o código ou CSS do seu tema, existe outra opção. Existem vários plug-ins do WordPress disponíveis que podem ajudá-lo a criar um design de tabela responsivo para o seu site.
Etapa 1: baixar um plug-in
Para começar, você precisará escolher um plugin. Como existem algumas opções para projetar tabelas responsivas, vamos destacar algumas para você começar:
- Ninja Tables : rotulado como o plugin número um do WordPress para criar tabelas responsivas, ele vem com mais de 100 estilos de tabela para escolher.
- wpDataTables : Este é um plug-in gratuito com uma versão premium, mas a versão lite vem com recursos para criar tabelas e gráficos ricos e interativos.
- WP Responsive Table : Este é um plug-in simples e gratuito que facilita a criação de tabelas responsivas que rolam horizontalmente em telas pequenas.
No restante deste exemplo, usaremos Tabelas Ninja para demonstrar como criar uma tabela de dados responsiva no WordPress.
Etapa 2: insira seus dados
Depois de instalar e ativar o plug-in, você poderá ir direto para a criação de uma tabela. Você pode navegar para NinjaTables > Todas as tabelas > Adicionar tabela :
Aqui você pode adicionar uma nova tabela do zero ou importar uma tabela de um arquivo. Vamos criar uma tabela do zero com a opção Add Table . Você precisará inserir um título e uma descrição para sua tabela:
Você terá algumas outras opções aqui também. Por exemplo, se você estiver configurando uma loja WooCommerce, poderá usar essas informações para criar uma tabela WooCommerce.
Depois de adicionar suas informações, você clicará em Adicionar para criar a tabela. Você precisará então começar a inserir dados. Você pode selecionar Adicionar coluna para configurar a estrutura da sua tabela:
Você terá alguns campos para preencher para criar sua coluna. Isso inclui o nome do cabeçalho da coluna e o tipo de dados que ele contém. Você também poderá definir seu ponto de interrupção responsivo:
Para escolher entre várias opções que determinam como suas tabelas responderão a diferentes dispositivos, você pode acessar o menu clicando em Mostrar sempre em todos os dispositivos :
Depois de criar suas colunas, selecione Adicionar dados e o NinjaTables fornecerá um formulário fácil para você adicionar várias entradas à tabela rapidamente:
Você pode deixar a opção Continuar adicionando marcada se tiver várias entradas para fazer. Quando terminar, você pode fechar a janela e retornar à tela de edição da mesa.
Etapa 3: formate sua tabela
Agora que você tem uma tabela com informações, pode explorar as configurações e opções de estilo do NinjaTable. Na janela de edição da tabela, você pode acessar mais configurações nas guias superiores e também no lado direito da tela:
Você terá muitas opções para personalizar o estilo e a aparência da sua tabela, incluindo cores alternadas das linhas da tabela, centralização do texto, ocultação de dados e muito mais.
Etapa 4: teste sua tabela
O NinjaTable facilita o teste da capacidade de resposta da sua tabela enquanto você a está editando. Na guia Table Design , você encontrará três opções para testar a capacidade de resposta da tela:
Você pode selecionar Desktop , Tablet ou Mobile para ver como sua mesa ficaria nesses tipos de dispositivos.
Cada tabela que você cria também vem com um shortcode. Além disso, você pode adicionar facilmente qualquer uma das suas tabelas ao conteúdo do seu site usando o bloco NinjaTable que você encontrará na seção Formatação do menu Editor de blocos.
Deixe o WP Engine ajudá-lo a manter seu site responsivo
Construir um site que emprega um design responsivo sólido não precisa ser um desafio quando você tem acesso aos recursos certos.
Aqui na WP Engine, queremos que você possa oferecer a melhor experiência digital para seus clientes. Confira nossos muitos planos de hospedagem WordPress e soluções de desenvolvedor para o seu próximo projeto!