Widget de tabela Elementor grátis

Elementor não tem widget de tabela própria, na versão gratuita ou Pro. Dynamic Table é um widget Master Addons gratuito que preenche essa lacuna: você adiciona células de cabeçalho e células do corpo no painel Elementor, e ele constrói uma tabela HTML real que você pode estilizar sem código As células podem conter texto, um ícone ou uma imagem, mesclar entre colunas ou linhas e extrair valores de tags dinâmicas É frequentemente usado para horários, folhas de especificações, listas de preços e diretórios Pense nisso como uma tabela de dados simples para linhas que você insere à mão Ele não classifica, pesquisa ou importa arquivos.

Painel do Table Head com opções de célula de cabeçalho e um dropdown de Decoração ao lado de uma tabela de gerenciamento de tarefas da equipe

Construa linhas e colunas no painel

A tabela vem de dois repetidores. Célula de cabeçalho da tabela contém um item por coluna e Célula Corporal da Mesa mantém todas as células em ordem de leitura, com a Nova fila? alternar que inicia a próxima linha Você pode arrastar itens para reordená-los, duplicar uma célula ou ocultar a linha de cabeçalho com o Cabeça de mesa interruptor.

  • Células mescladas: Column Span nas células do cabeçalho e do corpo e Row Span nas células do corpo.
  • Largura da coluna: ligue a Largura Personalizada na guia Opções de uma célula para definir sua largura.
  • Opções de texto por célula: alinhamento (esquerda, centro, direita ou justificativa) e decoração (sublinhado, overline ou linha).

Cabeçalho e estilo corporal

Estilo do cabeçalho da tabela define o fundo do cabeçalho (marinha escura por padrão), cor do texto, tamanho e cor do ícone, alinhamento, tipografia e preenchimento interno da célula. Corpo Mesa possui os mesmos controles para as células de dados, além de preenchimento em torno de ícones.

  • Cabeçalho: cores de fundo, texto e ícone, tamanho do ícone, alinhamento, tipografia e preenchimento de células.
  • Corpo: cores de fundo, texto e ícone, tamanho e preenchimento do ícone, alinhamento, tipografia e preenchimento de células.
  • Alinhamento por dispositivo: o alinhamento do cabeçalho e do corpo pode mudar no tablet e no celular.
Painel de estilo de corpo de mesa e cabeçalho de mesa ao lado de uma mesa com cabeçalho verde e linhas de tarefas de funcionários
Célula corporal com imagem e lista de tags dinâmicas ao lado de uma tabela mostrando nomes com pequenas fotos de perfil

Texto, Ícones, Imagens e Tags Dinâmicas em Células

Cada cabeçalho e célula corporal possui um Tipo opção: Nenhum, Ícone ou Imagem Os ícones vêm da biblioteca de ícones do Elementor, e as imagens obtêm um Tamanho de Imagem em pixels Os campos de texto aceitam tags dinâmicas, incluindo as do gratuito Tags Dinâmicas extensão, para que uma célula possa mostrar um título de postagem, um campo personalizado ou detalhes do autor Cada tag preenche uma célula O widget não faz loop através de postagens para construir linhas para você.

  • Ícones como marcas de verificação: use um ícone de tick ou cruz em comparações de planos ou recursos.
  • Imagens pequenas: adicione uma foto ou logotipo ao lado de um nome, dimensionado em pixels.
  • Tags dinâmicas: extraia valores únicos, como o título da postagem ou um campo personalizado.

Estilo Global: Listras, Fronteiras e Cantos

Estilo Global aplica-se a toda a tabela. Mesa Listrada? está ligado por padrão com uma cor de faixa cinza claro (#eee) que você pode alterar Você também define uma cor de fundo da tabela, preenchimento de célula interna, uma borda com tipo, largura e cor e raio de borda para cantos arredondados.

  • Linhas de zebra: continue se esforçando para mesas longas para que as linhas sejam fáceis de seguir.
  • Fronteiras: linhas sólidas, tracejadas, pontilhadas ou duplas ao redor das células.
  • Cantos arredondados: Border Radius suaviza a borda da mesa.
Tabela do Painel de Gerenciamento de Tarefas da Equipe com um cabeçalho verde e seis linhas de tarefas de funcionários
Interruptor de tabela responsivo no painel Configurações dinâmicas de tabela próximo a um horário de classe empilhado em cartões em um telefone

Tabela responsiva em dispositivos móveis

Mesa Responsiva? fica na seção Configurações e está ligada por padrão Em dispositivos de até 768 px de largura a linha do cabeçalho fica oculta, cada linha se torna um cartão e cada célula mostra o nome de sua coluna como um rótulo Um cronograma de cinco colunas se transforma em uma lista de cartas que você rola para baixo, para que ninguém precise rolar lateralmente.

  • Cartões empilhados: um cartão por linha, com o nome da coluna à esquerda e o valor à direita.
  • Alinhamento por dispositivo: o alinhamento do cabeçalho e do corpo tem seus próprios valores de tablet e celular.
  • Desligue-o: a tabela mantém sua grade em telefones Tabelas largas, em seguida, passar pela borda da tela, portanto, mantenha-os em três ou quatro colunas.

Código de tabela HTML versus o widget de tabela dinâmica

Sem um widget de tabela, a maneira usual de adicionar uma tabela no Elementor é escrever o HTML sozinho em um widget HTML. Veja como isso se compara ao widget.

CaracterísticaWidget HTML com seu próprio códigoMesa Dinâmica Master Addons
PreçoGrátis (núcleo do elementador)Grátis
Construindo linhas e colunasEscreva tags de tabela, tr e tdItens repetidores no painel
EstiloSeu próprio CSSControles da guia de estilo
Células mescladasatributos ColSpan e RowspanCampos de extensão de coluna e extensão de linha
Ícones e imagens nas célulasCole a marcaçãoBiblioteca de ícones ou biblioteca de mídia
Tags dinâmicasNãoSim, um valor por célula
Layout telefônicoSuas próprias consultas de mídiaAs linhas se acumulam em cartas
Classificando, pesquisa, importação CSVPrecisa de um script ou pluginNão

Se você precisar de classificação, pesquisa, paginação ou importação CSV, um plugin de tabela dedicado, como o TablePress, é a melhor escolha Para uma tabela estilizada que você edita dentro do Elementor, o widget salva você escrevendo HTML e CSS.

Relacionado: Tabela Preços (grátis), Tabela Comparação (Pro) e Tags Dinâmicas (grátis).

O que este widget de tabela de dados do elementor pode e não pode fazer

Tabela Dinâmica é uma tabela de dados para linhas que você digita Aqui está o que ele faz e onde ele pára.

CaracterísticaTabela Dinâmica
Linhas e colunas inseridas no painelSim
Células mescladas (Column Span e Row Span)Sim
Ícones e imagens nas célulasSim
Tags dinâmicasSim, um valor por célula
Fileiras listradasSim
Largura da coluna personalizadaSim
Empilhamento móvelSim, em 768px e abaixo
ClassificaçãoNão
ProcurarNão
PaginaçãoNão
Importação CSV ou ExcelNão

Qual ferramenta de mesa você precisa?

Tabela significa várias coisas diferentes nas pesquisas Elementor Escolha a ferramenta pelo que você está construindo.

O que você está construindoMelhor ferramenta
Uma tabela simples, como um cronograma, folha de especificações, lista de preços ou horárioTabela Dinâmica
Dados grandes que precisam de classificação, pesquisa, paginação ou importação de CSVTablePress, colocado com o widget Elementor Shortcode
Planos e preços lado a ladoTabela Preços
Uma comparação de recursos entre planos ou produtosTabela Comparação (profissional)
Horário funcionamentoHorário comercial

Relacionado: Acordeão Avançado para respostas longas que não caberiam em uma célula, e Tags Dinâmicas para preencher células a partir de dados postais.

Exemplos de tabela de elementos

As três tabelas abaixo são widgets ao vivo da Tabela Dinâmica, não capturas de tela Abra esta página em um telefone para ver cada um empilhado em cartões Mais layouts, incluindo um menu de restaurante e uma comparação de planos, estão no visualizador de demonstração abaixo deles.

Horário de aula

Uma programação semanal com cinco colunas Em um telefone cada classe torna-se seu próprio cartão.

Tempo Classe Instrutor Estúdio Espaços
Seg 07:00Fluxo VinyasaAlina PetrovaEstúdio 14 restantes
Seg 18h30Força e condicionamentoDan OseiPiso ginásioCompleto
Terça-feira, 09h30Reformador PilatesMarta SilvaEstúdio 22 restantes
Qua, 12h15Expresso HIITDan OseiPiso ginásio9 restantes
Qui 19:00Yin e restauraçãoAlina PetrovaEstúdio 111 restantes
Sábado às 10hIniciantes barreYara HaddadEstúdio 26 restantes

Requisitos do sistema

Três colunas comparando valores mínimos e recomendados, o formato usual de uma folha de especificações.

Componente Mínimo Recomendado
Wordpress6,06.6 ou mais recente
php7.48.2
elementar3.164.2 ou mais recente
MySQL /MariaDB5,7 /10,38,0/10,6
Limite de memória PHP128 MB256 MB
max_input_vars10003.000
HTTPSOpcionalNecessário para verificações de licença

Taxas de envio

Uma tabela de preços por destino e serviço, com a faixa desligada e um cabeçalho de luz.

Destino Serviço Prazo de entrega Livre Custo
Reino Unido continentalRoyal Mail rastreado 482 3 dias úteis£ 40£ 3,95
Reino Unido continentalDPD no próximo diaPróximo dia útil£ 120£ 6,95
Terras Altas e IlhasRoyal Mail rastreado 483 5 dias úteis£ 60£ 7,50
República da IrlandaDPD Irlanda2 4 dias úteis£ 150£ 11,00
UEDHL Europa3 6 dias úteis—£ 14,50
Resto do mundoDHL Expresso5 10 dias úteis—£ 24,00
Visualizador de modelos
Facebook
Twitter
whatsa
Copiar link
Compre Agora
Gestão Tarefas
Gestão Tarefas
Tabela Dinâmica com Confirmação de Pedidos
Tabela Dinâmica com Confirmação de Pedidos
Comparação Plano
Comparação Plano
Requisitos do Sistema
Requisitos do Sistema
Menu Restaurante
Menu Restaurante
Horário da aula
Horário da aula
Taxas de envio
Taxas de envio
Horário do balcão de suporte
Horário do balcão de suporte

Como Fazer uma Mesa no Elementor

No painel Elementor o widget é chamado de Tabela Dinâmica.

  1. Instale complementos mestres para Elementor e verifique isso Tabela Dinâmica está ligado nas configurações do widget Master Addons.
  2. Edite sua página com Elementor, procure por Tabela Dinâmica e arraste-o para dentro Começa com uma amostra de tabela de quatro colunas.
  3. Em Cabeça de mesa, adicione um Célula de cabeçalho da tabela por coluna e digite cada Nome da coluna.
  4. Em Corpo Mesaadicione um item por célula da esquerda para a direita Ligue Nova fila? na primeira célula de cada linha após a primeira.
  5. Usar Coluna Span ou Fim de linha na guia Opções de uma célula para mesclar células.
  6. Estile a tabela na guia Estilo e saia Mesa Responsiva? assim, as linhas são empilhadas em telefones e atualizam a página.

Perguntas frequentes para tabela dinâmica

Saiba as dúvidas mais solicitadas que os usuários têm sobre a Tabela Dinâmica e encontre respostas em um só lugar.
Existe um widget de tabela no Elementor?

Não no Elementor em si, gratuito ou Pro. Master Addons adiciona um gratuitamente: o widget Tabela Dinâmica constrói a tabela a partir de células de cabeçalho e corpo no painel.

Sim, com Tabela Responsiva? ligado, qual é o padrão Em dispositivos de até 768 px de largura cada linha empilha em um cartão e cada célula mostra seu nome de coluna como um rótulo Desligue-o para manter o layout normal da tabela nos telefones.

Sim, um valor por célula O cabeçalho e o texto do corpo aceitam tags dinâmicas, incluindo as Tags Dinâmicas de Complementos Mestres gratuitas, como título de postagem, campo personalizado e informações do autor O widget não cria uma linha para cada postagem, portanto, cada linha ainda é construída à mão.

O No. Elementor Pro adiciona um widget de Tabela de Preços para planos, mas nem o plugin principal nem o Pro têm um widget para linhas e colunas de dados Você precisa de um widget de complementos, como Tabela Dinâmica, um plugin de tabela ou seu próprio HTML.

Sim. Cole HTML de tabela no widget HTML e estilize-o com seu próprio CSS, ou defina as linhas com um contêiner Grid. Ambos funcionam para tabelas pequenas, embora cada alteração signifique editar código ou muitos widgets separados.

O que acontece se EU adicionar texto muito longo em uma célula?

O texto envolve dentro da célula, Ligue a Largura Personalizada na guia Opções da célula para fixar a largura da coluna e aumente o Preenchimento da Célula Interna se as linhas parecerem apertadas.

Não com uma única configuração As cores se aplicam a todo o cabeçalho ou a todo o corpo Para tabelas de planos, o Tabela Preços widget (gratuito) tem uma opção Destaque, e o Tabela Comparação widget (Pro) é construído para comparações de planos.

Não. O widget não possui classificação, pesquisa, paginação ou importação de CSV. Para aqueles, use um plugin de tabela de dados como o TablePress e coloque seu shortcode na página.

Sim. Construa a tabela no TablePress, copie seu shortcode, por exemplo [tabela id=1 /] e cole-o no widget Elementor Shortcode Essa rota se adapta a tabelas longas que precisam de classificação, pesquisa ou paginação.

Não Cada célula é um item separado no painel, então um bloco colado pousa em uma célula Insira as células uma de cada vez, ou importe o arquivo para o TablePress, que lê arquivos CSV e Excel.

Widgets e extensões de elementos de tendência

Construa sites sofisticados em menos tempo.

Extensão Master Addons Glassmorphism para Elementor: cartões de vidro fosco com o controle Blur Value definido como 20 px

Glassmorphismo

Extensão de Glassmorphism de Elementor Livre em Casa: Efeito de vidro fosco em uma alternância O Glassmorphism é o fosco...
Ver detalhes
Extensão Master Addons Container Extras para Elementor: contêiner tampado em uma largura máxima de 1400 px, com controles de largura máxima, altura máxima, largura mínima e altura mínima

Contêiner Extras

Home Elementor Container Max Width e Max Height Controls Container Extras é um Master gratuito...
Ver detalhes
Extensão Master Addons Patterns para Elementor: herói com o estilo Purple Gradient Grid Left, mais três estilos de padrões e o painel Habilitar Padrão

Padrões

Início 70+ Padrões de fundo de elementor gratuitos é uma extensão gratuita de complementos mestres que adiciona...
Ver detalhes
Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]

Duplicador de postagem/página

Home Páginas e postagens de elementos duplicados em um clique Post/Page Duplicator é um Master gratuito...
Ver detalhes
Extensão da barra de progresso de leitura de complementos mestres para Elementor: barra azul 42% preenchida na parte superior de uma página de política de privacidade, com configurações de habilitação, posição, altura e preenchimento de cores

Barra de progresso de leitura

Início Adicionar uma barra de progresso de leitura no WordPress (Elementor) A barra de progresso de leitura é gratuita...
Ver detalhes