Maneira CSS de alinhar a tabela horizontalmente

96

Quero mostrar uma tabela de largura fixa no centro da janela do navegador. Agora eu uso

<table width="200" align="center">

Mas o Visual Studio 2008 avisa sobre esta linha:

O atributo 'align' é considerado desatualizado. Uma construção mais recente é recomendada.

Qual estilo CSS devo aplicar à tabela para obter o mesmo layout?

— Alexander Prokofyev
fonte

2

Então, qual solução você escolheu no final?

— Ola Tuvesson

183

Steven está certo, em teoria :

a maneira “correta” de centralizar uma tabela usando CSS. Os navegadores em conformidade devem centralizar as tabelas se as margens esquerda e direita forem iguais. A maneira mais simples de fazer isso é definir as margens esquerda e direita como "automáticas". Assim, pode-se escrever em uma folha de estilo:

table
{ 
    margin-left: auto;
    margin-right: auto;
}

Mas o artigo mencionado no início desta resposta fornece uma outra maneira de centralizar uma mesa.

Uma elegante solução cross-browser css: Funciona tanto no MSIE 6 (Quirks and Standards), Mozilla, Opera e até mesmo Netscape 4.x sem definir larguras explícitas:

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>

— VonC
fonte

Você pode colocar a mesa no centro com margem: 0 auto; no IE6 e superior se você garantir que sua página tenha uma declaração doctype válida.

— Ola Tuvesson de

@Marco: Não tenho agora essas informações, mas pode ser uma boa base para uma pergunta sobre StackOverflow.

— VonC

1

você está perfeitamente certo. TABLE não precisa especificar uma largura para ficar centralizado horizontalmente. Eu testei. Enquanto o DIV precisa de uma largura a ser especificada para obter a centralização horizontal.

— Marco Demaio

17

Experimente isto:

<table width="200" style="margin-left:auto;margin-right:auto">

— Jalbert
fonte

2

Simples. O IE6 e posteriores centralizarão sua mesa alegremente com "margin: 0 auto;" se apenas a página renderizar no modo "padrões". Para fazer isso acontecer, você precisa de uma declaração doctype válida, como

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ou

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

É verdade que IE5.5 e abaixo ainda se recusam a centralizar a tabela, mas talvez você possa conviver com isso, especialmente se a página ainda estiver funcional com a tabela alinhada à esquerda. Acho que agora os usuários do IE5.5 e abaixo estão bastante acostumados com alguns sites de aparência estranha - mas você ainda precisa garantir que essas falhas visuais não tornem seu site inutilizável.

Boa codificação!

EDIT: Desculpe, talvez eu deva apontar que você não precisa ter um doctype "estrito" para colocar o IE6 no modo de renderização "padrões". Percebi que pode parecer assim pelos exemplos doctype que postei acima. Por exemplo, esta declaração doctype obviamente funcionará igualmente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

— Ola Tuvesson
fonte

2

Embora possa ser uma heresia no mundo de hoje - no passado, você faria o seguinte código não css. Isso funciona em tudo, incluindo os navegadores de hoje, mas - como eu disse - é uma heresia no mundo de hoje:

<center>
<table>
   ...
</table>
</center>

O que você precisa é alguma forma de saber se você deseja centralizar uma mesa e se a pessoa está usando um navegador antigo. Em seguida, insira os comandos "<center>" ao redor da mesa. Caso contrário - use css.

Surpreendentemente - se você deseja centralizar tudo na área BODY - você apenas pode usar o padrão

text-align: center;

Comando css e no IE8 (pelo menos) ele irá centralizar tudo na página incluindo tabelas.

— Mark Manning
fonte

0

style="text-align:center;"

(eu acho que)

ou você pode simplesmente ignorá-lo, ainda funciona

— Steven A. Lowe
fonte

0

Isso deve funcionar:

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

— Matt Howell
fonte

0

Estou aprendendo isso e o que funcionou para mim foi primeiro fazer uma tabela com três linhas. Defina a margem para as linhas esquerda e direita em 50%. Em seguida, coloque uma única linha, tabela de largura fixa dentro dos "dados da tabela" da "linha da tabela" central.

0

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>

— Chandra Shekhar Sharma
fonte

0

Basicamente, funciona como

<table align="center">
...

Mas, você pode fazer isso da melhor maneira usando CSS, e esta será uma abordagem melhor para usar CSS, pois fornece comportamento dinâmico para uma página da web e é responsivo.

  <table style="text-align:center;">

Além disso, se você precisar exibir apenas a tabela em uma página, você pode usar o alinhamento da tag do corpo apenas como mostrado abaixo,

 <body style="text-align:center;">
<table>
  ...
</table>

Se você quiser alguma outra sugestão, por favor me avise. Certamente irá ajudá-lo nisso. Também usando recursos de bootstrap, isso seria mais fácil e interativo.

— Gourav Goutam
fonte

0

Adicione ao estilo div:

width: fit-content;

— Khaled Mohab
fonte