{"id":8251,"date":"2025-04-06T22:51:14","date_gmt":"2025-04-06T22:51:14","guid":{"rendered":"https:\/\/tableberg.com\/?p=8251"},"modified":"2025-04-26T16:32:24","modified_gmt":"2025-04-26T16:32:24","slug":"como-criar-tabelas-empilhaveis-no-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/pt\/how-to-create-stackable-tables-in-wordpress\/","title":{"rendered":"Como criar tabelas empilh\u00e1veis no WordPress"},"content":{"rendered":"

As tabelas padr\u00e3o normalmente funcionam bem em desktops. Voc\u00ea pode ver que tudo se encaixa no lugar, e o layout permanece limpo. Por\u00e9m, quando visualizadas em um telefone ou tablet, essas mesmas tabelas geralmente n\u00e3o funcionam. Elas ficam muito largas, for\u00e7ando os usu\u00e1rios a rolar para os lados apenas para ler uma \u00fanica linha. <\/p>\n\n\n\n

As tabelas empilh\u00e1veis resolvem esse problema transformando cada linha em um bloco vertical de informa\u00e7\u00f5es. Em vez de exibir dados em uma \u00fanica linha, o conte\u00fado \u00e9 empilhado um sob o outro e produz um ambiente mais f\u00e1cil para tornar a tabela compreens\u00edvel em telas pequenas.<\/p>\n\n\n\n

No entanto, esse layout n\u00e3o \u00e9 \u00fatil em um desktop. Com espa\u00e7o suficiente dispon\u00edvel, as tabelas regulares s\u00e3o mais f\u00e1ceis de navegar e mais eficientes. As tabelas empilh\u00e1veis foram projetadas principalmente para melhorar a legibilidade em dispositivos m\u00f3veis, n\u00e3o para substituir as tabelas padr\u00e3o em todos os tamanhos de tela.<\/p>\n\n\n\n

Neste artigo, vamos orient\u00e1-lo sobre como criar uma tabela empilh\u00e1vel usando o plug-in Tableberg e ajust\u00e1-la para telas de celular.<\/p>\n\n\n\n

\n\n\n\n

O que \u00e9 uma mesa empilh\u00e1vel?<\/strong><\/h2>\n\n\n\n

Uma tabela empilh\u00e1vel \u00e9 uma vers\u00e3o responsiva de uma tabela normal que ajusta seu layout em telas menores. Em desktops, uma tabela pode aparecer como uma grade padr\u00e3o com linhas e colunas. Por\u00e9m, em dispositivos m\u00f3veis, as tabelas largas podem se tornar dif\u00edceis de ler e exigir rolagem horizontal. As tabelas empilh\u00e1veis entram em a\u00e7\u00e3o para corrigir esse problema, transformando cada linha em um bloco vertical, em que os r\u00f3tulos das colunas s\u00e3o exibidos acima de cada valor. Isso facilita a leitura e a rolagem do conte\u00fado em telas estreitas sem perder nenhuma informa\u00e7\u00e3o. Na maioria dos casos, isso \u00e9 feito usando CSS ou plug-ins compat\u00edveis com layouts de tabela responsivos. Os melhores resultados s\u00e3o obtidos com o uso de plug-ins com configura\u00e7\u00f5es m\u00f3veis integradas ou classes de utilit\u00e1rios que detectam a largura da tela. Mas \u00e9 melhor ter em mente que, antes de aplicar o empilhamento, \u00e9 preciso verificar quantas colunas voc\u00ea tem e se o conte\u00fado permanece leg\u00edvel. <\/p>\n\n\n\n

\n\n\n\n

Criar tabelas empilh\u00e1veis no WordPress<\/strong><\/h2>\n\n\n\n

Para mostrar como as tabelas empilh\u00e1veis realmente funcionam no WordPress, usaremos o Tableberg <\/a>plugin. Ele \u00e9 simples de usar, suporta todos os tipos de conte\u00fado dentro das c\u00e9lulas da tabela e inclui configura\u00e7\u00f5es integradas para empilhar tabelas em dispositivos m\u00f3veis. Vamos passar para as etapas. <\/p>\n\n\n\n

Etapa 1: Instalar e ativar o Tableberg<\/strong><\/h3>\n\n\n\n

No painel do WordPress, selecione Plugins<\/strong> \u2192 Adicionar novo<\/strong>e, em seguida, procure por Tableberg<\/strong>. Clique em Instalar agora<\/strong>e, depois de instalado, pressione Ativar <\/strong>para come\u00e7ar a us\u00e1-lo em seu site.<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n
\n\n\n\n

Etapa 2: Inserir uma tabela<\/strong><\/h3>\n\n\n\n

Abra o post ou a p\u00e1gina em que voc\u00ea deseja colocar a tabela. Use o bot\u00e3o inseridor de blocos (bot\u00e3o +)<\/strong>, procure por \"Tableberg\", <\/strong>e insira-a. Voc\u00ea ser\u00e1 solicitado a escolher o n\u00famero de linhas e colunas - defina isso com base no tipo de tabela que deseja criar.<\/p>\n\n\n\n

\"Inserir<\/figure>\n\n\n\n
\n\n\n\n

Etapa 3: Adicionar conte\u00fado \u00e0 tabela<\/strong><\/h3>\n\n\n\n

Clique em cada c\u00e9lula e comece a preencher seu conte\u00fado. Voc\u00ea pode adicionar texto, imagens, \u00edcones, classifica\u00e7\u00f5es por estrelas, bot\u00f5es, fitas ou listas - o Tableberg suporta v\u00e1rios tipos de blocos dentro de cada c\u00e9lula.<\/p>\n\n\n\n

\"Adicionar<\/figure>\n\n\n\n
\n\n\n\n

Etapa 4: Ativar o modo de empilhamento responsivo<\/strong><\/h3>\n\n\n\n

Para aplicar as configura\u00e7\u00f5es responsivas, primeiro voc\u00ea precisa selecionar a tabela inteira. Clique na borda externa de qualquer c\u00e9lula individual e, quando a barra de ferramentas aparecer, selecione o \u00edcone de tableberg nela. Isso garantir\u00e1 que toda a tabela seja selecionada.<\/p>\n\n\n\n

\"Selecione<\/figure>\n\n\n\n

Com a tabela completa selecionada, olhe para o painel de configura\u00e7\u00f5es do bloco \u00e0 direita. Role para baixo at\u00e9 encontrar a se\u00e7\u00e3o denominada Responsive Settings (Configura\u00e7\u00f5es responsivas). Ative a op\u00e7\u00e3o que permite que a tabela seja ajustada em telas de celulares e tablets.<\/p>\n\n\n\n

\"Ativar<\/figure>\n\n\n\n

Etapa 5: Escolha o modo de pilha e configure o comportamento<\/strong><\/h3>\n\n\n\n

Depois de ativar o modo responsivo, voc\u00ea poder\u00e1 selecionar como a tabela se adapta. Selecione Pilha<\/strong> em vez de Rolagem<\/strong>. Isso transforma cada linha da tabela em um bloco vertical para facilitar a visualiza\u00e7\u00e3o em telas menores.<\/p>\n\n\n\n

\"Selecionar<\/figure>\n\n\n\n
\n\n\n\n

Etapa 6: Use os recursos avan\u00e7ados da pilha<\/strong><\/h3>\n\n\n\n

Abaixo da sele\u00e7\u00e3o de modo, voc\u00ea pode ativar Transformar linhas em colunas<\/strong> se quiser que a tabela inverta a dire\u00e7\u00e3o do layout. Voc\u00ea tamb\u00e9m encontrar\u00e1 a op\u00e7\u00e3o de Mostrar a primeira coluna em cada linha da pilha,<\/strong> que \u00e9 \u00fatil quando a primeira coluna cont\u00e9m r\u00f3tulos. Por fim, voc\u00ea pode definir quantos itens devem aparecer por linha da pilha.<\/p>\n\n\n\n

\"Usar<\/figure>\n\n\n\n
\n\n\n\n

Etapa 7: Visualizar e finalizar<\/strong><\/h3>\n\n\n\n

Clique no bot\u00e3o Preview (Visualizar) e verifique o layout na visualiza\u00e7\u00e3o para celular e tablet. Se tudo estiver correto, v\u00e1 em frente e publique ou atualize sua postagem.<\/p>\n\n\n\n

\"Pr\u00e9-visualiza\u00e7\u00e3o<\/figure>\n\n\n\n
\n\n\n\n

Conclus\u00e3o<\/strong><\/h3>\n\n\n\n

As tabelas empilh\u00e1veis s\u00e3o uma solu\u00e7\u00e3o pr\u00e1tica para facilitar a leitura do conte\u00fado em telefones e tablets, especialmente quando se trabalha com tabelas simples ou de tamanho moderado. Entretanto, quando uma tabela inclui muitas colunas, o formato empilhado pode se tornar longo e dif\u00edcil de navegar. Nesses casos, outras t\u00e9cnicas, como filtragem ou oculta\u00e7\u00e3o de colunas, podem funcionar melhor. Ainda assim, para a maioria dos casos de uso di\u00e1rio, o empilhamento oferece uma maneira limpa e confi\u00e1vel de manter suas tabelas compat\u00edveis com dispositivos m\u00f3veis. E neste artigo, mostramos exatamente como criar uma usando o Tableberg, desde a instala\u00e7\u00e3o at\u00e9 a visualiza\u00e7\u00e3o final.<\/p>\n\n\n\n

<\/p>","protected":false},"excerpt":{"rendered":"

Standard tables typically work well on desktops. You can see everything fits in place, and the layout stays clean. But when viewed on a phone or a tablet, those same tables often break down. They stretch too wide, forcing users to scroll sideways just to read a single row. Stackable tables solve this problem by […]<\/p>\n","protected":false},"author":9,"featured_media":8256,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7,130],"tags":[],"class_list":["post-8251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-tableberg"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Stacked-Table-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/pt\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/8251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=8251"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/8251\/revisions"}],"predecessor-version":[{"id":8300,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/8251\/revisions\/8300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/8256"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=8251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=8251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=8251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}