Construir uma tabela de dados no WordPress geralmente significa lutar com HTML ou colar um shortcode que você não pode estilizar O Tabela Dinâmica widget em Complementos Mestres para Elementor permite construir um visualmente: adicionar colunas de cabeçalho, preencher linhas e estilizar cada parte do painel Elementor Sem marcação de tabela, sem bloqueio de plug-in.
Ele se adapta a qualquer coisa que pertença a uma grade, como diretórios de funcionários, folhas de especificações, horários ou listas de preços. Você pode mesclar células, adicionar ícones a cabeçalhos, listrar as linhas e ativar um modo responsivo para telefones. Abaixo está uma execução em todas as configurações, desde as células do cabeçalho até as guias de estilo.
O que o widget Tabela Dinâmica faz #
O widget constrói uma tabela HTML padrão a partir de dois repetidores: um para a linha de cabeçalho e outro para as células do corpo Cada célula é seu próprio item, então você controla o texto, o alinhamento e até mesmo os intervalos de coluna ou linha sem escrever nenhum código.
Possui três guias: Conteúdo para o cabeçalho, corpo e configurações, Estilo para cores e espaçamento e Avançado para as opções usuais do Elementor O resultado é uma tabela limpa e responsiva que corresponde ao seu tema.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- Os dados que você deseja mostrar, esboçados como colunas e linhas.
Como adicionar o widget Tabela Dinâmica #
No editor Elementor, abra o Elementos painel e pesquisa Tabela Dinâmica, ou vá até a seção Complementos mestres Arraste-o para sua página Ele carrega com uma tabela de amostra para que você edite a partir de um layout de trabalho em vez de uma grade vazia.
Configure o cabeçalho da tabela #
Abrir o Conteúdo guia. O Cabeça de mesa seção detém a linha do cabeçalho. O Cabeça de mesa alternar mostra ou oculta o cabeçalho e o Célula de cabeçalho da tabela o repetidor contém um item por coluna.
Cada célula de cabeçalho tem suas próprias sub-guias Conteúdo e Opções. Em Conteúdo você definiu o Nome da coluna e pode adicionar um Ícone ao lado dele (Nenhum ou Ícone, da biblioteca de ícones ou de um SVG carregado).Usar Adicionar Item para adicionar colunas, o ícone de cópia para duplicar uma e o X para removê-la.
Preencha o corpo da mesa #
O Corpo Mesa seção detém as células Cada item é uma célula, e a Nova fila? alterne as marcas onde uma nova linha começa, para adicionar células em ordem e sinalizar o início de cada linha.
Cada célula corporal também possui sub-guias Conteúdo e Opções:
- Texto do corpo: o conteúdo da célula, com uma opção Escrever com IA.
- Extensão da coluna e extensão da linha: mesclar uma célula em colunas ou linhas.
- Largura personalizada: defina uma largura fixa para essa coluna.
- Alinhamento: esquerda, centro, direita ou justificar dentro da célula.
- Decoração: aplique um estilo predefinido para destacar uma célula.
Para aumentar a tabela, clique em Adicionar Item, digite o texto da célula e ligue Nova fila? na primeira célula de cada nova linha Aqui está sendo adicionada uma quinta linha de funcionários.
Faça a tabela responsiva #
O Configurações seção tem a Mesa Responsiva? alternar. Com ele ligado, a mesa reflui em telas pequenas em vez de transbordar, então cada linha se acumula em um cartão legível nos telefones. Esta é a configuração que as pessoas esquecem e é por isso que uma mesa parece quebrada no celular.
Estilize a mesa #
O Estilo a guia é dividida em Estilo Global, Estilo do cabeçalho da tabela, e Corpo Mesa, mais Padrões (uma opção Pro). O Estilo Global a seção define a aparência de toda a tabela.
- Mesa Listrada: ligue as listras de zebra e escolha a cor listrada da linha.
- Cor de fundo: a cor base atrás das células.
- Preenchimento de células internas: o espaço dentro de cada célula.
- Tipo de fronteira e raio de fronteira: as linhas entre as células e os cantos arredondados.
Cabeçalho e estilo corporal #
O Estilo do cabeçalho da tabela seção define o fundo do cabeçalho, cor do texto, tipografia e preenchimento para que a linha superior se distancie A Corpo Mesa a seção faz o mesmo para as células de dados.
- Cor de fundo e cor do texto: as cores das células do corpo.
- Tamanho do ícone, cor do ícone e preenchimento do ícone: estilo para qualquer ícone de célula.
- Alinhamento e Tipografia: como o corpo do texto fica e parece.
O resultado na página #
Publique ou visualize e a tabela será renderizada com suas colunas, linhas e faixas no lugar, responsivas no celular se você ativar isso.
Casos de uso comum #
- Diretórios de funcionários ou equipes com nomes, funções e detalhes de contato.
- Folhas especificações comparando características e valores do produto.
- Horários e horários para aulas, eventos ou horário comercial.
- Listas preços que não precisam de um completo tabela preços.
- Resumos de dados retirado de uma planilha em uma grade estilizada.
Dicas para trabalhar com o widget Tabela Dinâmica #
- Planeje as colunas primeiro. Defina cada célula de cabeçalho antes de preencher o corpo para que as linhas se alinhem.
- Marque Nova Linha apenas na primeira célula. Sinalize o início de cada linha, nem todas as células, ou o layout quebra.
- Ligue a tabela responsiva para telefones. Tabelas largas transbordam no celular, a menos que esteja ativado.
- Use listras para mesas longas. As linhas Zebra tornam uma tabela de dados alta muito mais fácil de digitalizar.
- Mantenha o texto da célula curto. Cordas longas esticam uma coluna, então use Largura personalizada para manter as coisas equilibradas.
Perguntas frequentes #
O que é o widget Tabela Dinâmica em Master Addons?
É um widget Elementor que constrói uma tabela de dados HTML visualmente Você adiciona colunas de cabeçalho e células do corpo através de repetidores, em seguida, estilo as cores, preenchimento, bordas e striping do painel Não há HTML ou shortcode envolvido, ea tabela pode ser feita responsiva.
Posso mesclar células na Tabela Dinâmica?
Sim. Cada célula do corpo tem opções de Span de Coluna e Span de Linha na sua sub - guia Opções Defina um span para fundir essa célula em várias colunas ou linhas, o que é útil para títulos agrupados ou linhas de resumo dentro da tabela.
A tabela dinâmica responde no celular?
Sim. A seção Configurações tem um botão Tabela Responsiva Com ele ligado, a tabela reflui em telas pequenas para que cada linha seja empilhada em um bloco legível em vez de transbordar a página, o que mantém tabelas amplas utilizáveis em telefones.
Posso adicionar linhas listradas à tabela?
Sim. na guia Estilo, a seção Estilo Global tem uma alternância de Tabela Listrada e uma Cor de Fundo Listrada. Ligue-a para adicionar listras de zebra, que alternam a cor da linha e tornam as tabelas longas muito mais fáceis de ler.
Posso adicionar ícones aos cabeçalhos da tabela?
Sim. Cada célula de cabeçalho tem uma opção Tipo definida como Ícone, onde você escolhe um ícone da biblioteca ou carrega um SVG. O ícone é exibido próximo ao nome da coluna, o que ajuda a rotular colunas como e-mail, telefone ou localização rapidamente.
Embrulhando #
O widget Tabela dinâmica transforma linhas e colunas de dados em uma tabela limpa, estilo sem tocar HTML Defina seus cabeçalhos, adicione as células do corpo, sinalize cada nova linha, em seguida, estilo as cores, listras e bordas para corresponder à sua página Para layouts de dados relacionados, consulte o Widget de tabela de comparação e o Widget de tabela de preços, navegue por completo Widgets e extensões Master Addons, e verifique o página preços para o que cada plano inclui.
