{"id":226268,"date":"2022-08-29T16:36:00","date_gmt":"2022-08-29T13:36:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226268"},"modified":"2022-11-09T01:39:21","modified_gmt":"2022-11-08T22:39:21","slug":"como-definir-facilmente-a-cor-de-fundo-da-tabela","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-definir-facilmente-a-cor-de-fundo-da-tabela\/","title":{"rendered":"Como definir facilmente a cor de fundo da tabela"},"content":{"rendered":"\n

As tabelas s\u00e3o pe\u00e7as essenciais do seu site. Eles s\u00e3o usados \u200b\u200bpara transmitir dados e informa\u00e7\u00f5es importantes de maneira f\u00e1cil de entender. Em ess\u00eancia, uma tabela \u00e9 um grupo ou uma cole\u00e7\u00e3o de linhas e colunas que cont\u00eam determinados tipos de informa\u00e7\u00f5es. Eles foram inicialmente destinados a fazer parte da marca\u00e7\u00e3o HTML.<\/p>\n

Embora as tabelas sejam a maneira correta de apresentar dados, muitos designers as evitam apenas pelo fato de poderem parecer pouco atraentes. No entanto, isso pode ser alterado com um pouco de trabalho e implementando alguns m\u00e9todos f\u00e1ceis, por exemplo, alterando a cor de fundo da tabela. N\u00e3o \u00e9 demorado tornar facilmente as tabelas atraentes com alguns ajustes.<\/p>\n

Voc\u00ea logo descobrir\u00e1 que a apresenta\u00e7\u00e3o de dados tabulares funciona melhor em tabelas, como \u00e9 esperado. As c\u00e9lulas de tabela s\u00e3o frequentemente usadas em<\/a> marca\u00e7\u00f5es HTML como componentes onde o conte\u00fado \u00e9 colocado para criar um site. Essas c\u00e9lulas, ou grades, s\u00e3o partes essenciais dos designs de sites. \u00c9 por isso que \u00e9 importante para voc\u00ea tornar as tabelas do seu site atraentes e bem lubrificadas.<\/p>\n

Neste artigo criado por nossa equipe em wpDataTables<\/a>, veremos como voc\u00ea pode alterar e definir a cor de fundo da tabela facilmente. Isso pode, no m\u00ednimo, trazer alguma variedade ao conte\u00fado.<\/p>\n

Tabelas do WordPress<\/h3>\n

A vers\u00e3o padr\u00e3o do WordPress n\u00e3o oferece a voc\u00ea, o criador, nenhuma ajuda significativa para criar ou alterar tabelas.<\/a> Ent\u00e3o, voc\u00ea ter\u00e1 que fazer isso manualmente. Como criador de um site WordPress,<\/a> voc\u00ea deve primeiro habilitar o modo Texto do editor antes de alterar o c\u00f3digo HTML e inserir c\u00f3digos para tabelas nele.<\/p>\n

Al\u00e9m disso, o ajuste da cor de fundo da tabela deve ser feito manualmente. Depois de criar uma tabela, a cor de fundo de uma tabela ser\u00e1 automaticamente definida para corresponder \u00e0 cor de fundo de um tema. A \u00fanica maneira de tornar o plano de fundo da tabela exclusivo \u00e9 alterar os valores do c\u00f3digo e implementar essas altera\u00e7\u00f5es com CSS<\/a> posteriormente.<\/p>\n

Como alterar a cor de fundo da tabela manualmente<\/h2>\n

Quando voc\u00ea deseja incorporar uma tabela HTML em seu site, conv\u00e9m estiliz\u00e1-la um pouco antes de colocar informa\u00e7\u00f5es nas c\u00e9lulas da tabela. Voc\u00ea pode, por exemplo, alterar a cor de fundo da tabela HTML, mas h\u00e1 algumas outras altera\u00e7\u00f5es que voc\u00ea pode fazer nas bordas da tabela, cores das colunas e muito mais.<\/p>\n

Alterar o c\u00f3digo CSS \u00e9 essencial para todas as altera\u00e7\u00f5es no design da tabela. Coisas como a cor de fundo da tabela s\u00e3o definidas no c\u00f3digo CSS, assim como todas as propriedades de toda a tabela HTML e as propriedades das linhas e c\u00e9lulas.<\/p>\n

Agora, vamos dar uma olhada em como alterar as cores de fundo manualmente alterando o c\u00f3digo CSS.<\/p>\n

Como alterar a cor de fundo de toda a tabela<\/h3>\n

Para fazer isso, basta inserir o seguinte trecho de c\u00f3digo.<\/p>\n

<table style=\"background-color:#70163C;\"><\/code><\/pre>\n
Alterando a cor de uma linha da tabela<\/h3>\n
Voc\u00ea tamb\u00e9m pode alterar a cor de uma linha individual da tabela, que pode ser diferente da cor de fundo da tabela. Quando uma linha individual tem uma cor diferente do plano de fundo, essa linha da tabela desejada chamar\u00e1 a aten\u00e7\u00e3o das pessoas. Com a seguinte passagem de c\u00f3digo, podemos alterar a cor de uma \u00fanica linha. A cor do texto tamb\u00e9m \u00e9 alterada.<\/p>\n
<table style=\"background-color:#70163C;\"><\/code><\/pre>\n
Mudando a cor de fundo de uma c\u00e9lula<\/h3>\n
Assim como voc\u00ea pode alterar a cor de uma linha individual, voc\u00ea tamb\u00e9m pode alterar a cor de uma c\u00e9lula individual. Para alterar a cor de uma linha, voc\u00ea pode adicionar a propriedade "style" na<\/p>\n
colchetes e defina a cor da c\u00e9lula a partir da\u00ed.<\/p>\n
<table style=\"background-color:#70163C;\"><\/code><\/pre>\n
Fundo da c\u00e9lula e cor do texto<\/h3>\n
Em seguida, vamos dar uma olhada em como definir a cor de fundo para linhas inteiras e como alterar as cores de texto correspondentes. Voc\u00ea pode fazer isso adicionando as propriedades de cor de fundo a<\/p>\n
tags, como ser\u00e1 exemplificado com o c\u00f3digo fonte abaixo. As cores das bordas tamb\u00e9m ser\u00e3o alteradas, pois podem coincidir com as cores de fundo.<\/p>\n
<style type=\"text\/css\">\n<\/code><\/pre>\n
Usando plugins para alterar a cor de fundo da tabela<\/h2>\n
Voc\u00ea pode simplificar todo o processo de altera\u00e7\u00e3o da cor de fundo da tabela usando alguns plugins<\/a>. Por padr\u00e3o, o WordPress n\u00e3o oferece o recurso de alterar as cores da tabela, mas voc\u00ea pode incorporar alguns plugins que permitir\u00e3o fazer isso muito rapidamente. Aqui, vamos dar uma olhada nos melhores plugins que voc\u00ea pode usar para alterar a cor de fundo da tabela em sites WordPress e como us\u00e1-los.<\/p>\n
wpDataTables<\/h3>\n
wpDataTables \u00e9 um plugin de tabela WordPress<\/a> mais vendido que torna seu trabalho com tabelas, gr\u00e1ficos e gerenciamento de dados super f\u00e1cil. Mais de 30.000 empresas e indiv\u00edduos j\u00e1 confiam no wpDataTables para trabalhar com dados financeiros, cient\u00edficos, estat\u00edsticos, comerciais e outros.<\/p>\n
As tabelas do WordPress criadas com o plugin wpDataTables s\u00e3o responsivas nativamente e podem ser usadas em qualquer tipo de dispositivo.<\/p>\n
wpDataTables funciona r\u00e1pido se sua tabela tiver algumas linhas ou alguns milh\u00f5es. Todas as opera\u00e7\u00f5es ser\u00e3o tratadas pelo servidor MySQL.<\/p>\n
wpDataTables permite que voc\u00ea crie filtros individuais para seu conjunto de dados, o que \u00e9 uma maneira bastante pr\u00e1tica de restringir rapidamente os resultados da sua tabela do WordPress.<\/p>\n
TablePress<\/h3>\n
\"Como<\/a><\/p>\n
Criar tabelas impressionantes e atraentes com cores de fundo exclusivas nunca foi t\u00e3o f\u00e1cil quanto com o TablePress. Voc\u00ea pode alterar as cores usando a guia Plugin Options no TablePress, que permite alterar as cores da tabela rapidamente.<\/p>\n
Tamb\u00e9m permite alterar a cor de uma \u00fanica linha. Por exemplo, um peda\u00e7o de c\u00f3digo como este pode ser usado para fazer isso:<\/p>\n
.tablepress-id-N .row-X td {<\/code><\/pre>\n
Voc\u00ea pode alterar o c\u00f3digo de cores para escolher as cores que deseja ter.<\/p>\n
Tabelas Ninja<\/h3>\n
\"Como<\/a><\/p>\n
Outra op\u00e7\u00e3o \u00e9 o plugin Ninja Tables. Este plugin permite que voc\u00ea crie tabelas impressionantes e responsivas.<\/a> Tudo pode ser feito com apenas alguns cliques; tudo que voc\u00ea precisa fazer \u00e9 abrir a parte “editar" do plugin. Isso revela algumas op\u00e7\u00f5es muito abrangentes para alterar suas tabelas.<\/p>\n
Se voc\u00ea gostou de ler este artigo sobre como definir facilmente a cor de fundo da tabela, voc\u00ea deve conferir este artigo sobre tabelas Bootstrap<\/a>.<\/p>\n
Tamb\u00e9m escrevemos sobre alguns assuntos relacionados como Como centralizar uma tabela<\/a> com CSS, tabelas HTML<\/a>, tabelas responsivas<\/a> com CSS, tabelas CSS<\/a> e plugins de tabelas jQuery<\/a>.<\/p>\n
Fonte de grava\u00e7\u00e3o:  wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
A cor de fundo da tabela deve ser feita manualmente, depois de criar uma tabela, a cor de fundo de uma tabela ser\u00e1 definida automaticamente para corresponder<\/p>\n","protected":false},"author":1,"featured_media":201277,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[846,867],"tags":[1170],"class_list":["post-226268","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/226268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=226268"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/226268\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/201277"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=226268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=226268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=226268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}