Crie tabelas responsivas e bonitas no WordPress com TablePress

Olá pessoal, neste vídeo vou explicar como usar o plugin TablePress, que é usado para fazer tabelas em nosso WordPress Post.

Inscreva-se no meu canal:  

Podemos baixar este plugin gratuito do mesmo repositório WordPress

baixar prensa de mesa

Além disso, o TablePress possui extensões muito boas que também são gratuitas e nos ajudarão muito. Uma dessas extensões é o Responsive Tables, que torna nossas tabelas Responsive. Esta extensão é Premium, mas você pode baixá-la gratuitamente, eles apenas nos pedem para doar $ 9 por todo o trabalho que fazem para manter este plugin, mas a doação não é obrigatória.

complemento responsivo ao tablepress

As tabelas geralmente têm este formato:

mesa de prensa

Mas se os tornarmos responsivos, ele transformará o cabeçalho em uma coluna, assim:

imprensa de mesa responsiva

Então, quando você vê em um iphone ou em qualquer dispositivo, a mesa se adapta e você sempre a verá bem.

Vamos ver como o Table Press está configurado:

A primeira coisa que você precisa fazer é baixar o TablePress Plugin e sua extensão.

plugin de prensa de mesa

Uma vez instalado, vou ao TablePress e crio a tabela. Colocamos um nome na nossa tabela, se quisermos também podemos adicionar uma descrição, e escolhemos o número de linhas e colunas que nossa tabela terá:

prensa de mesa nova mesa

Clicamos em Adicionar Tabela e agora você pode colocar as informações. Para o meu exemplo eu teria:

adicionar mesa de prensa de mesa

Por baixo, dá-me a opção de melhorar o conteúdo, se eu quiser editar uma célula.

Eu clico em Editor Avançado, ele me pede para selecionar a célula que quero editar, você seleciona e eu poderia colocar Negrito, sublinhado, etc….

editor avançado tablepress

Se eu quiser adicionar mais linhas ou colunas à minha tabela, posso fazê-lo na mesma seção clicando:

prensa de mesa de linha de coluna

Assim que termino de editar minha tabela, clico em salvar alterações e na parte superior ele me mostra o código de identificação. Se eu quisesse ver minha tabela dentro de um Post, teria que colar esse código.

código de acesso tablepress

Eu abro um input e colo o código, o resultado seria o seguinte:

tablepress mesa inserida

Mas podemos perceber que este não é o formato Responsivo

Se eu quiser converter minha tabela, devo ir até a seção de documentação e copiar o código que me diz o que adicionar: responsivo=”all”

código de acesso de tablepress responsivo

Agora, se eu fizer isso, você notará que meu cabeçalho foi convertido de uma linha para uma coluna

linha de cabeçalho do tablepress

E você poderia vê-lo em qualquer dispositivo móvel sem perder as informações, basta rolar horizontalmente para ver todas as células que deseja.

rolagem de imprensa de mesa

Como podemos ver, esta é uma maneira muito legal de fazer tabelas.

Espero que tenha sido tão útil para você quanto foi para mim.

Se você não está inscrito na Zona Premium, você pode dar inscreva-se por 10€/mês aqui

ATÉ LOGO!

Deixe um comentário