As tabelas são a ferramenta adequada no WordPress para apresentar dados de forma organizada, mas as tabelas simples e monocromáticas podem não chamar a atenção ou se comunicar de forma eficaz. Portanto, quando estiver procurando maneiras de melhorar a aparência das suas tabelas, adicionar cores diferentes em atributos diferentes pode ser um truque fácil.
Um simples ajuste de cores em diferentes elementos de sua tabela pode mudar a forma como as tabelas se apresentam aos olhos dos espectadores. Usando estrategicamente cores para cabeçalhos, rodapés, colunas, linhas, bordas ou células específicas, você pode transformar sua tabela básica em uma ferramenta de comunicação eficaz.
Este artigo foi criado para mostrar como é fácil melhorar a aparência das tabelas do WordPress. Ele se concentra em métodos simples e fáceis de usar para iniciantes que permitem adicionar cores às suas tabelas, tudo sem a necessidade de escrever uma única linha de código.
Vamos dar uma olhada nesses métodos e etapas para obter uma compreensão mais clara das abordagens para colorir suas tabelas.
Método 1: Usando o bloco de tabela padrão
O Table Block no WordPress é um recurso integrado do editor Gutenberg projetado para a criação e personalização simples de tabelas. Embora suas opções de cores sejam um tanto básicas, você pode ajustar as cores do fundo e do texto com facilidade.
Etapa 1: Selecione a tabela
Localize a tabela que deseja personalizar no editor do WordPress e clique na tabela para abrir o painel de configurações do bloco no lado direito.
Etapa 2: Acessar as configurações de bloqueio
Com a tabela selecionada, localize o Guia Estilos no painel de configurações do bloco e clique nele. Em seguida, navegue até a seção Configurações de cores seção.
Etapa 3: Personalize as cores do texto, do plano de fundo e da borda
No painel Color settings (Configurações de cores), escolha uma cor de fundo apropriada para aplicar a toda a tabela. Você terá a flexibilidade de escolher entre um fundo sólido ou gradiente, mas lembre-se de que isso afetará uniformemente toda a tabela, não linhas ou células específicas.
Em seguida, selecione uma cor de texto para garantir que o conteúdo permaneça legível no plano de fundo escolhido.
Role até a opção de cor da borda dentro das mesmas configurações e selecione uma cor que complemente o design da mesa. Essa alteração afetará uniformemente as bordas de toda a tabela.
Limitações do bloco de tabela padrão
- Não há suporte para cores alternativas de linhas ou colunas.
- Não há opção para personalizar as cores de células individuais.
- As seções de cabeçalho e rodapé não podem ser destacadas com cores separadas.
Método 2: Usando o plug-in Tableberg
Tableberg é um plug-in especializado para usuários que precisam de opções de personalização mais avançadas para suas tabelas. Esse método é ideal para aqueles que desejam ter mais controle sobre o design da tabela do que o Table Block padrão.
Etapa 1: Instalar e ativar o Tableberg
Abra o painel do WordPress e vá para Pluginse, em seguida, clique em Adicionar novo. Digite "Tableberg" na barra de pesquisa, instale-o e ative o plug-in.
Etapa 2: Criar ou selecionar uma tabela
Abra a página ou postagem em que deseja adicionar sua tabela, clique no inseridor de blocos (+) e adicione o bloco tableberg. Quando terminar, criar a tabela com base em seus requisitos e preenchê-la com conteúdo. Por fim, selecione a tabela inteira clicando no botão Ícone Tableberg na barra de ferramentas do bloco para abrir o Configurações de bloco.
Etapa 3: Personalize as cores do cabeçalho e do rodapé
Primeiro, certifique-se de que sua tabela tenha um Cabeçalho e Rodapé que atenda às suas necessidades. Agora, vá para a guia styles (estilos) do painel de configurações do bloco e use as opções de cores para atribuir cores de fundo a essas seções.
Etapa 4: estilizar o plano de fundo (linha, coluna e célula)
Na seção de configurações da mesma cor, é possível definir a mesma cor para linhas pares e ímpares. Se você quiser uma cor uniforme para todo o histórico (além do cabeçalho e do rodapé) da sua tabela, basta colocar a mesma cor nessas seções.
Para células individuais, selecione a célula em questão e mova as configurações de cor novamente. Selecione a cor apropriada para sua célula.
Da mesma forma, se você quiser ter uma cor consistente para uma linha ou coluna inteira, selecione a linha ou coluna primeiro e, em seguida, utilize as configurações de cor para alterar a cor. Porém, se já estiver usando a opção de cor de linha par/ímpar, será necessário limpar essas cores antes que essa configuração entre em vigor.
Etapa 5: Ajustar as cores das bordas
Role mais para baixo na seção Guia Estilos e localize o Configurações de borda. Você encontrará uma gama de recursos para aplicar cores a todas as bordas de sua tabela. Primeiro, você pode alterar a borda de sua tabela na seção Borda da mesa e, em seguida, altere a cor da borda interna na seção Borda interna de forma semelhante. Para obter um efeito melhor, talvez seja necessário alterar a espessura de cada borda primeiro.
Em seguida, se você quiser ter uma cor de borda específica para uma linha ou coluna específica, selecione a linha ou coluna primeiro e, em seguida, role mais adiante na seção Configurações de borda. Encontre as configurações para o Borda da linha e o Borda da coluna e alterar as cores.
Etapa 6: Ajustar a fonte/cor do texto
Se você quiser alterar a cor da fonte de todos os textos em sua tabela, você precisa usar as configurações do Global Font Style. Role mais para baixo no painel de configurações e localize a opção Cor da fonte e selecione a cor desejada.
Se quiser alterar a cor da fonte de um texto específico em uma célula específica, clique nesse texto, vá para a caixa de seleção Estilos no painel do lado direito, abra o texto Cor e alterá-la.
Conclusão
O bloco de tabela padrão é perfeito para ajustes básicos, enquanto o Tableberg oferece opções mais avançadas para personalização detalhada. Este guia mostrou a você como estilizar cabeçalhos, rodapés, linhas e células sem esforço, tudo isso sem nenhuma codificação. Com esses métodos, você pode criar tabelas que não sejam apenas funcionais, mas também visualmente alinhadas com o design do seu site. Agora, é hora de colocar essas dicas em prática e fazer com que suas tabelas se destaquem.
