Declaração display: table, o anti-herói do layout

Introdução

Anti-herói
- um personagem central em uma história, filme, ou drama que não tem as qualidades dos heróis convencionais.

O uso de tabelas para construção de layouts é um assunto polêmico. Em geral, os desenvolvedores web consideram o uso de tabelas para criar layouts um tabu. Embora as razões contrárias ao uso de tabelas para criar layouts estejam bem documentadas, a maioria dos desenvolvedores não é capaz de expor uma base sólida para condená-las e limitam-se a acreditar e repetir que "tabelas são ruins para layouts".

O movimento anti-tabelas HTML, criado há algum tempo, foi forte. Ele conseguiu promover uma lavagem cerebral em uma geração inteira de desenvolvedores fazendo-os acreditar que qualquer uso de tabela é condenável.

Evidentemente, eu sou um desses desenvolvedores que evitaram layout com tabelas, até mesmo para exibir dados tabulares. Eu até repreendi os meus colegas desenvolvedores quando usavam display:table para criar layouts do tipo dashboard (ou o layout Santo Graal).

Hoje constato que dispendi uma quantidade incrível de tempo "hackeado" meu CSS em nome do não uso de tabelas.

Dois tipos de layout com tabelas

Há duas maneiras de usar tabela para criação de layout - Tabela criada com marcação HTML e Tabela criada com CSS.

Tabela criada com marcação HTML refere-se ao uso do elemento nativo TABLE (<table>...</table>) enquanto Tabela criada com CSS imita o mesmo modelo de tabela HTML, mas com uso de propriedades CSS.

Segundo o modelo CSS para tabelas temos:

table { display : table}
tr { display : table-row}
thead { display : table-header-group }
tbody { display : table-row-group}
tfoot { display : table-footer-group }
col { display : table-column}
colgroup { display : table-column-group }
td, th { display :  table-cell }
caption { display : table-caption }

Há uma diferença fundamental

Como um indivíduo que aprendeu desenvolvimento web com o CSS Zen Garden, eu detesto HTML table-layout. Sem saber, eu estava estabelecendo uma (ilusória correlação) "illusory correlation bias" por superestimar a relação entre a Tabela criada com marcação HTML e a Tabela criada com CSS.

Se é parecido e funciona como uma tabela, deve ser uma tabela? Errado!

Na realidade, Tabela criada com CSS tem uma diferenciação chave sobre Tabela criada com marcação HTML. Em uma Tabela criada com CSS pode-se optar por não ser uma tabela apenas ajustando-se suas propriedades CSS.

Algo que é impossível de se ajustar em Tabela criada com marcação HTML. E com isso, você é capaz de abrir um enorme leque de possibilidades para construção consistente de layouts baseados em tabelas.

A seguir mostramos alguns exemplos úteis e perfeitamente válidos para uso da declaração display: table na criação de layouts:

Centralização vertical dinâmica

Clique o botão para adicionar mais linhas.

See the Pen Alinhamento vertical com uso de display: table by Maujor (@Maujor) on CodePen.

Este é, talvez, o uso mais comum para a declaração display:table. Com ele, você pode conseguir um verdadeiro alinhamento vertical (exatamenter no meio) para elementos com altura dinâmica.

Existe uma outra maneira de alinhar verticalmente um elemento que pode interessá-lo e é mostrada a seguir:

.seletor {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Centralização horizontal dinâmica

Para centrar um elemento dinâmico na horizontal, você pode definir o elemento para ser display:inline-block e em seguida, definir text-align:center para o seu container. A desvantagem nesse caso é o efeito colateral do alinhamento do texto. Todo elemento-filho dentro do container herda a declaração text-align: center e esse pode não ser o alinhamento esperado para os demais elementos-filhos.

Graças a @mojtabaseyedi, descobri uma outra maneira de centralizar na horizontal um elemento dinâmico, sem efeitos colaterais. Basta aplicar display:table e margin:auto ao elemento dinâmico.

See the Pen Centralização horizontal dinâmica by Maujor (@Maujor) on CodePen.

Layout responsivo

See the Pen Layout responsivo com display: table by Maujor (@Maujor) on CodePen.

Como já mencionado anteriormente, pode-se alterar o comportamento de uma Tabela criada com CSS de modo a que ela não se comporte como tabela. Para isso basta alterar o valor da propriedade display de table-cell para block, fazendo com que haja o empilhamento dos elementos HTML.

Ordem das colunas na marcação

See the Pen Ordem HTML - Layout responsivo com display: table by Maujor (@Maujor) on CodePen.

Como mostrado no exemplo, você pode até mesmo alterar a ordem da marcação HTML. Você pode ler mais sobre essa técnica aqui.

Rodapé dinâmico fixo

Um rodapé dinâmico fixo precisa atender a dois critérios:

1. O rodapé precisa ficar na parte inferior da página quando o conteúdo do corpo da página é insuficiente para exceder a altura da página.
2. O rodapé flui normalmente, uma vez que o conteúdo do corpo da página excede a altura da página.

See the Pen Rodapé dinâmico fixo by Maujor (@Maujor) on CodePen.

Mais exemplos de rodapé fixo podem ser vistos nas matérias de Chris Coyier ou Ryan Fait.

Suas soluções funcionam muito bem, mas existe apenas uma desvantagem - o rodapé deve ser de altura fixa. Você pode resolver este problema com javascript, mas prefiro resolvê-lo com CSS. Com display:table, você é capaz de criar um rodapé fixo com a altura dinâmica.

Layout Santo Graal

Em uma matéria escrita no site alistapart, o layout Santo Graal é uma página com um TOPO, 3 colunas de mesma altura (2 barras laterais de largura fixa e uma bara central de largura fluida) e um rodapé fixo.

Fonte: stackoverflow.com

Tanto quanto possível, o layout Santo Graal deve atingir os seguintes objetivos:

1. Ter uma coluna central fluida com barras laterais de largura fixa.
2. Permitir que a coluna central apareça primeiro na marcação HTML.
3. Qualquer coluna seja a de maior altura.

Layout Santo Graal com 'display: table'

See the Pen Layout Santo Graal by Maujor (@Maujor) on CodePen.

O codepen acima recria o layout Santo Graal. Você pode redimensionar a janela para observar a coluna central fluida e também adicionar mais conteúdo para testar o rodapé.

O único objetivo que não se conseguiu satisfazer foi o segundo

1. Permitir que a coluna central apareça primeiro na marcação HTML

Eu estou supondo que este objetivo é para fins de SEO. Portanto, se SEO não é de extrema importância, display:table vai resolver o layout Santo Graal com relativa facilidade.

Você está de brincadeira? CSS Flex pode resolver tudo!

Na verdade, pode. Confira a matéria de Phillip Walton flex solution para os meus exemplos acima. No entanto, eu não estou abandonando meus exemplos. Os navergadores IE8 e IE9 ainda constituem 32% of the desktop browser market share o que é uma parcela considerável a se desprezar com adoção da solução CSS Flex.

A não ser que seu site seja servido exclusivamente ao tráfego puramente móvel, o que eu duvido, aconselho a ficar com display:table.

Atualização: Estou trabalhando para uma empresa de consultoria, portanto, a compatibilidade desktop me preocupa. Mas se você só precisa atender aos navegadores móveis, sinta-se livre para usar CSS Flex.

Conclusão

Com os exemplos acima, eu espero ter sido capaz de revelar as qualidades do difamado display:table. No entanto, tenho de salientar que Tabela criada com CSS não é a bala de prata para layouts (Leia: quirky bugs ). Use-as no contexto certo e você vai salvar a si mesmo da agonia de muitos hacks CSS nas madrugadas.

Compartilhe essa matéria com seus amigos