Como Criar uma Tabela no Elementor (4 Maneiras, Com Passos)

Principais conclusões

• Elementor não possui widget de tabela no plugin principal ou no Elementor Pro, portanto, uma tabela no Elementor vem de código HTML, contêineres, um plugin de tabela ou um widget de complemento.
• O widget HTML é a maneira de criar uma tabela no Elementor sem um plugin: colar tags table, tr, th e td e adicionar um pequeno bloco de estilo para bordas e preenchimento.
• Um contêiner Grid pode imitar uma tabela, mas uma tabela de 3 colunas e 4 linhas precisa de 12 widgets separados do Editor de Texto e o resultado não é uma tabela HTML real.
• TablePress 3.4 adiciona seu próprio widget Elementor chamado TablePress table, e suas tabelas podem ser classificadas, pesquisadas e paginadas pelos visitantes.
• O widget Master Addons Dynamic Table constrói uma tabela HTML real a partir de células de cabeçalho e corpo no painel Elementor e empilha linhas em cartões em dispositivos de até 768 px de largura.

Para criar uma tabela no Elementor você precisa de uma solução alternativa, porque o Elementor não envia um widget de tabela Os quatro que funcionam são um widget HTML com seu próprio código, um contêiner Grid, uma tabela TablePress e um widget de complemento, como Tabela Dinâmica.

Construímos uma tabela de cada uma das quatro maneiras no Elementor 4.3 e analisamos cada uma em uma área de trabalho e em um telefone.

Elementor tem um widget de tabela?

No. Pesquisar por “table” no painel Elementor e os únicos resultados integrados são Tabela de Conteúdo e Tabela de Preços, e ambos pertencem ao Elementor Pro. Nenhum deles faz linhas e colunas de dados Tabela de Preços é um único cartão de preços, e Tabela de Conteúdo lista os títulos na página.

Qual caminho você deve usar?

Escolha o tamanho da mesa e quem a editará mais tarde.

Caminho 1: Crie uma tabela no Elementor com o widget HTML

Esta é a maneira de fazer uma tabela no Elementor sem um plugin Você escreve uma tabela HTML simples e Elementor imprime como está.

1. Edite a página com Elementor e arraste o html widget em um contêiner.
2. Cole o código abaixo no Código HTML campo.
3. Altere o texto entre as tags. Cada tr é uma linha, cada th é uma célula de cabeçalho e cada uma td é uma célula corporal.
4. Clique Publicar.

<table class="simple-table">
  <thead>
    <tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
    <tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
  </tbody>
</table>

<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>

A mesa é leve e real table elemento, que os motores de busca e leitores de tela entendem É mais difícil de manter, embora Um cliente que deseja adicionar uma linha tem que editar HTML, e uma tag de fechamento ausente quebra o layout.

Maneira 2: Construa uma mesa com um contêiner Grid

Um contêiner Grid coloca widgets em linhas e colunas, para que possa parecer uma tabela. Adapta-se a um pequeno bloco onde as células seguram botões, ícones ou imagens.

1. Adicione um recipiente e defina Layout do contêiner para Grade.
2. Definir Colunas para o número de colunas que você precisa e Fileiras para o número de linhas, cabeçalho incluído.
3. Definir Lacunas a 0 para que as células se toquem.
4. Arraste um Editor de texto widget em cada célula e digite seu texto.
5. Em cada widget aberto Avançado, então adicione Preenchimento e um 1px Fronteira. Dê às células do cabeçalho uma cor de fundo.

A contagem de widgets cresce rapidamente Três colunas e quatro linhas já precisam de 12 widgets, e uma tabela 5 por 10 precisa de 50 Borders dobrar onde as células se encontram, a menos que você sintonize cada lado A saída é um conjunto de divs, então um leitor de tela não anuncia como uma tabela Mantenha este método para um punhado de células.

Maneira 3: Adicione uma tabela TablePress ao Elementor

TablePress é um plugin de tabela com mais de 600.000 instalações ativas Você constrói a tabela em sua própria tela de administração e, em seguida, colocá-lo no Elementor É a escolha certa para tabelas longas, porque ele importa arquivos Excel, CSV, HTML e JSON e permite que os visitantes classificar, pesquisa e página através das linhas.

1. Instalar e ativar MesaPress.
2. Ir para MesaPress, então Adicionar Novo para digitar uma tabela, ou Importar para carregar um ficheiro.
3. Salve a tabela e anote seu ID.
4. Edite sua página com Elementor e procure por MesaPress table. Arraste o widget e escolha sua mesa no Tabela queda.
5. Se preferir um shortcode, arraste o Código curto widget e entre [table id=1 /] com seu próprio ID.

O widget não tem guia Estilo, então as cores e fontes vêm das configurações do TablePress e do seu próprio CSS No nosso telefone de teste de 390 px, a tabela de cinco colunas também passou pela borda direita até ligarmos Rolagem Horizontal nas configurações da tabela.

Way 4: Use um widget de tabela

Um widget addon mantém todo o trabalho dentro do Elementor Você digita células no painel e estiliza a tabela na guia Estilo, da mesma forma que trabalha com qualquer outro widget Usaremos o widget Tabela Dinâmica dos Complementos Mestres aqui.

1. Instale complementos mestres e verifique isso Tabela Dinâmica está ligado em suas configurações de widget.
2. Edite a 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. Aberto Cabeça de mesa. Adicione um Célula de cabeçalho da tabela por coluna e digite cada Nome da coluna.
4. Aberto Corpo Mesa. Adicione um Célula Corporal da Mesa por célula, da esquerda para a direita Ligue Nova fila? na primeira célula de cada linha após a primeira.
5. Para mesclar células, abra as células Opções guia e conjunto Coluna Span ou Fim de linha.
6. Estile o cabeçalho, corpo e listras no Estilo tab, depois publique.

Cada célula pode conter texto, um ícone ou uma imagem, e os campos de texto aceitam tags dinâmicas. Mesa Responsiva? na seção Configurações está ativado por padrão, portanto, em dispositivos de até 768 px de largura, cada linha se torna um cartão com os nomes das colunas como rótulos.

Quer vê-lo antes de instalar alguma coisa? O Página Tabela Dinâmica tem três mesas ao vivo e oito layouts de demonstração que você pode abrir.

Tabela Dinâmica não classifica, pesquisa, paginar ou importar arquivos Cada célula é digitada à mão, o que é bom para 30 células e cansativo para 300, então para conjuntos de big data voltar para Way 3.

Erros a evitar

• Construindo a tabela no widget Editor de texto. Ele não tem botão de tabela, então você acaba escrevendo HTML em sua guia Texto de qualquer maneira O widget HTML é o lugar mais limpo para esse código.
• Usando um widget de preços para dados. Tabela de Preços e Tabela Preços os widgets são construídos para planos com um botão de compra Eles são a forma errada para linhas de dados.
• Esquecendo telefones. Uma tabela de cinco colunas raramente se encaixa em uma tela de 390 px Decida se as linhas devem ser empilhadas, rolar lateralmente ou perder uma coluna.
• Construindo 50 células a partir de widgets. Se o método de grade precisar de mais de cerca de uma dúzia de widgets, mude para uma tabela real.

Perguntas frequentes

Pensamentos finais

Existem quatro maneiras de criar uma tabela no Elementor Use o widget HTML para uma pequena tabela e nenhum plugin, um contêiner Grid para algumas células com botões ou imagens, TablePress para dados longos ou importados e um widget de tabela quando quiser editar e estilizar a tabela dentro do Elementor.

Se o último se encaixa, Tabela Dinâmica faz parte de Adições Mestres junto com seus outros widgets.

Leitura relacionada

• Dicas da tabela de preços do elementor
• Melhores plugins de índice para WordPress