{"id":226275,"date":"2022-08-29T15:48:00","date_gmt":"2022-08-29T12:48:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226275"},"modified":"2022-11-09T01:39:19","modified_gmt":"2022-11-08T22:39:19","slug":"como-centralizar-uma-tabela-com-css-guia-rapido","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-centralizar-uma-tabela-com-css-guia-rapido\/","title":{"rendered":"Como Centralizar uma Tabela com CSS (Guia R\u00e1pido)"},"content":{"rendered":"\n

O uso de tabelas em web design tem uma hist\u00f3ria interessante. Antes da ado\u00e7\u00e3o do CSS, as tabelas n\u00e3o eram usadas apenas para exibir dados tabulares de maneira convencional, mas eram mais comumente usadas para controlar layouts de p\u00e1gina completos.<\/p>\n

Naquela \u00e9poca, as tabelas HTML<\/a> eram usadas para definir tanto a estrutura quanto a apar\u00eancia visual das p\u00e1ginas da web, onde o posicionamento da tabela podia ser especificado diretamente no HTML. Por exemplo, para definir o alinhamento de uma tabela ao centro, pode-se simplesmente escrever:<\/p>\n

<table align=\"center\"><\/code><\/pre>\n
No entanto, alinhar suas tabelas dessa maneira n\u00e3o \u00e9 mais correto e foi descontinuado no HTML5. Isso porque os padr\u00f5es modernos da Web ditam a separa\u00e7\u00e3o de estrutura (HTML) e estilo (CSS), e o m\u00e9todo acima viola esse princ\u00edpio.<\/p>\n
HTML nunca deve ser usado para definir a apar\u00eancia de um elemento; esse \u00e9 agora o trabalho do CSS. Ent\u00e3o, qual \u00e9 a maneira correta de centralizar uma tabela em CSS?<\/a> Neste artigo da nossa equipe da wpDataTables, abordamos essa quest\u00e3o e mostramos algumas dicas sobre como alinhar suas tabelas corretamente.<\/p>\n
Sabemos uma coisa ou duas sobre tabelas, considerando que criamos um incr\u00edvel plugin de tabela WordPress<\/a>, ent\u00e3o vamos mergulhar.<\/p>\n
Como posso usar CSS para centralizar uma tabela?<\/h3>\n
O CSS define a apar\u00eancia da p\u00e1gina, permitindo que voc\u00ea controle a apar\u00eancia e o posicionamento de cada elemento, incluindo o elemento tabela e todos os seus subelementos, como th, tr e td.<\/p>\n
Antes de mais nada, vamos ver a maneira ‘correta’ de centralizar uma tabela com CSS. Se as margens direita e esquerda tiverem o mesmo valor, os navegadores modernos devem mostrar a tabela centralizada. Uma maneira f\u00e1cil de conseguir isso \u00e9 ter ambas as margens definidas como autom\u00e1ticas.<\/p>\n
Um exemplo de como escrever isso em CSS est\u00e1 abaixo:<\/p>\n
table<\/code><\/pre>\n
Observe que voc\u00ea n\u00e3o pode simplesmente centralizar a tabela da mesma forma que faria com o texto \u2014 .por exemplo, usando "text-align: center". Isso ocorre porque o elemento table \u00e9 um elemento de n\u00edvel de bloco, em oposi\u00e7\u00e3o a um elemento embutido. "texto -align: center" centralizar\u00e1 apenas o conte\u00fado embutido, como o texto dentro da tabela, em vez da pr\u00f3pria tabela.<\/p>\n
No entanto, para vers\u00f5es mais antigas do Internet Explorer, h\u00e1 um bug no qual os elementos em n\u00edvel de bloco s\u00e3o tratados como elementos embutidos. Assim, a \u00fanica maneira de centralizar uma tabela para trabalhar com algumas vers\u00f5es do IE \u00e9 definir explicitamente “text-align: center” no elemento pai da tabela (por exemplo, o elemento body como mostrado abaixo):<\/p>\n
body {<\/code><\/pre>\n
Voc\u00ea pode testar como diferentes navegadores se comportar\u00e3o com estilos diferentes, usando “margin-left: auto; margin-right: auto” ou “text-align: center”.<\/p>\n
Veremos como centralizar uma tabela em navegadores modernos e antigos para que pare\u00e7a correta.<\/p>\n
Os exemplos ter\u00e3o o seguinte formato geral:<\/p>\n
<div>\n\n<table>\n\n<\/table>\n\n<\/div><\/code><\/pre>\n
Os estilos s\u00e3o aplicados a qualquer<\/p>\n
,<\/p>\n
ou \u00e0s vezes ambos.<\/p>\n
A se\u00e7\u00e3o da folha de estilo com a qual vamos brincar para definir as margens \u00e9:<\/p>\n
.center1<\/code><\/pre>\n
Este exemplo funcionar\u00e1 bem em navegadores mais recentes. Ele tamb\u00e9m funcionar\u00e1 na maioria dos navegadores mais antigos. Depois de usar esse m\u00e9todo, abra-o em diferentes navegadores para verificar sua apar\u00eancia.<\/p>\n
CSS para navegadores mais antigos e navegadores mais novos juntos:<\/p>\n
.centertbl<\/code><\/pre>\n
Como funciona? A primeira parte \u00e9 colocada no<\/p>\n
. Isso centralizar\u00e1 uma tabela no Internet Explorer 5 e Netscape 4. A segunda parte \u00e9 aplicada ao<\/p>\n
dentro de um<\/p>\n
.<\/p>\n
As configura\u00e7\u00f5es das margens permitem que voc\u00ea centralize uma tabela em navegadores que funcionam bem com CSS. Em seguida, o texto embutido ser\u00e1 colocado de volta no alinhamento \u00e0 esquerda padr\u00e3o, substituindo o “text-align: center” inicial para suporte a navegadores mais antigos.<\/p>\n
Como centralizar com uma margem<\/h3>\n
Uma das maneiras mais comuns de centralizar uma tabela \u00e9 definir as margens inferior e superior como 0 e as margens esquerda e direita como autom\u00e1ticas.<\/p>\n
Aqui est\u00e1 um m\u00e9todo comumente usado:<\/p>\n
table {<\/code><\/pre>\n
Ou voc\u00ea pode fazer assim:<\/p>\n
table {<\/code><\/pre>\n
Se voc\u00ea est\u00e1 atr\u00e1s de uma tabela com uma largura exata, voc\u00ea pode fazer isso como faria normalmente e a margem autom\u00e1tica dividir\u00e1 o espa\u00e7o restante.<\/p>\n
table {<\/code><\/pre>\n
Outra maneira de fazer isso \u00e9 usar porcentagens para definir a largura:<\/p>\n
table {<\/code><\/pre>\n
Alinhamento da c\u00e9lula: alinhamento de texto versus alinhamento vertical<\/h3>\n
Se voc\u00ea quiser saber como centralizar o texto em CSS, h\u00e1 duas partes para alinhar o texto em uma c\u00e9lula; horizontal e vertical. Horizontalmente \u00e9 se o texto ser\u00e1 alinhado ao centro, \u00e0 esquerda ou \u00e0 direita dessa c\u00e9lula. Isso \u00e9 controlado pela propriedade text-align.<\/p>\n
Verticalmente \u00e9 se est\u00e1 no meio, na parte superior ou na parte inferior da c\u00e9lula. Isso \u00e9 controlado pela propriedade vertical-align.<\/p>\n
Voc\u00ea aplica as propriedades abaixo ao elemento TH ou TD para que seu texto seja alinhado verticalmente e horizontalmente como desejar. Por exemplo:<\/p>\n
td {\ntext-align: center;\nvertical-align: top;\n}<\/code><\/pre>\n
\"Como<\/a><\/p>\n
A justifica\u00e7\u00e3o do texto refere-se a acrescentar espa\u00e7os entre todas as palavras at\u00e9 que se encaixem perfeitamente no espa\u00e7o dispon\u00edvel na linha. A linha final n\u00e3o justifica.<\/p>\n
Dicas de estilo de mesa<\/h3>\n
Antes de concluir, pensamos que pode ser \u00fatil ter uma lista de dicas r\u00e1pidas para sua refer\u00eancia. Isso ajudar\u00e1 quando voc\u00ea fizer uma tabela em CSS.<\/a><\/p>\n