The tableless table
2013-03-01 23:13 -0300. Tags: comp, web, em-portugues
![[Pintura de Hasegawa Tōhaku de um mestre zen prestes a cortar um gato em dois]](img/cutting-cat-by-hasegawa.jpg "Pintura de Hasegawa Tōhaku, ou assim reza a lenda. E o sujeito depictado provavelmente é o Nansen, e não o Mumon, mas ninguém ia notar a diferença mesmo. (長谷川等伯『南泉斬猫図』)")
Mumon, membro do CSS Working Group
Uma rápida inspeção do código-fonte atual (mas em vias de mudar) das páginas do ~vbuaraujo revelará que eu tenho (ou tinha) o costume questionável de usar TABLEs para layout mais ou menos shamelessly. Meus motivos para isso eram:
- Se a tabela for linearizável, a página vai funcionar corretamente em basicamente qualquer browser em uso, visual ou não (corrijam-me se eu estiver errado).
- Alguns layouts que são simples de criar com tabelas costumavam exigir uma boa dose de contorcionismo com CSS. O exemplo clássico (para mim, pelo menos, já que esse é o caso com a minha página principal e com este blog) é criar um layout com:
- Um cabeçalho que ocupa todo o espaço horizontal da página;
- Duas ou mais colunas de texto, tais que todas as colunas tenham a mesma altura, determinada pela maior altura exigida por uma das colunas;
- Uma nota de rodapé que ocupa todo o espaço horizontal da página.
Até hoje eu não sei qual é o jeito "certo" de se fazer isso com CSS clássico. Os tutoriais que se encontram por aí que mostram como é simples criar um layout com colunas em CSS costumam ignorar o detalhe do "todas as colunas com a mesma altura".
De qualquer forma, essa tabela do blog andava me incomodando, em parte porque uma das coisas que eu mais gosto do CSS é a possibilidade de desabilitá-lo (View > Page Style > No Style no Firefox) e ler as páginas como as seqüências de texto que Deus quis que elas fossem, coisa que não é possível quando a página usa TABLEs.*
Recentemente eu descobri uma maravilha do CSS 2.1: é possível usar CSS para instruir o browser a renderizar elementos quaisquer (e.g., DIVs) como tabelas, linhas, células, etc. Assim, migrar de um layout baseado em TABLEs para um baseado em DIVs + CSS é trivial:
<!-- Exemplo com CSS inline; normalmente a coisa decente a se fazer
é dar IDs aos elementos e estilizá-los com um arquivo CSS externo. -->
<H1>Título</H1>
<DIV STYLE="display: table; width: 100%; table-layout: fixed">
<DIV STYLE="display: table-row">
<DIV STYLE="display: table-cell; width: 75%">
<P>coluna 1
</DIV>
<DIV STYLE="display: table-cell: width: 25%">
<P>coluna 2
</DIV>
</DIV>
</DIV>
<P>Rodapé.
No caso de uma tabela com uma única linha, a DIV com display: table-row (equivalente a um <TR>) não é estritamente necessária; o browser cria uma "linha anônima" para conter as células. A propriedade table-layout: fixed indica que a largura das colunas é fixa; o padrão é auto, que permite que a largura das colunas seja reajustada de acordo com o conteúdo das células. Há outros valores possíveis para display relacionados a tabelas; para mais informações, consulte o standard.
_____
* Normalmente eu faço isso quando estou usando uma tela pequena e quero dar zoom em uma página sem que ela transborde para fora da janela ou que uma barra lateral cresça junto com o texto e coma espaço útil da tela.