Se você tem desenvolvido sites com HTML e CSS nos últimos anos, você já deve ter utilizado alguma técnica para simular um layout com múltiplas colunas. Neste artigo, irei explorar uma técnica ainda não muito difundida: tabelas CSS.

Tabelas?

Não é da tag table que estamos falando aqui e sim a simulação de uma estrutura tabular através de propriedades CSS.

A tag table, quando utilizada para o seu propósito (dados tabulares) não apresenta problema nenhum em termos de Web Standards. Porém, até hoje ainda existem sites feitos total ou parcialmente em uma estrutura feita destas tags, o que está longe de ser o ideal.

As tabelas CSS existem para resolver este problema, possibilitando um nível de controle mais robusto que floats ou posicionamento. É possível simular a aparência visual de uma tabela sem as várias implicações negativas de se utilizar a tag table para layout.

O layout que iremos montar neste artigo está abaixo: uma simples página com três colunas.

Download dos Arquivos de Exemplo

Abaixo, o HTML deste layout básico:

<div id="site">
    <div id="cabecalho">
        <h1>Tabelas CSS</h1>
    </div>
    <div id="corpo" class="grupo">
        <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Empresa</a></li>
                <li><a href="#">Serviços</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </div>

        <div id="conteudo">
            <div class="conteudo-interno">
                <p> ... </p>
                <p> ... </p>
                <p> ... </p>
            </div>
        </div>

        <div id="sidebar"></div>
    </div>

    <div id="rodape">
        <p>&copy; Empresa Ltda.</p>
    </div>
</div>

Conhecendo a técnica

Para utilizar o poder das tabelas CSS é muito simples. Utiliza-se a propriedade display de um elemento para conseguir o efeito desejado. As propriedades disponíveis são:

• table: estiliza o elemento como se fosse uma tag table (elemento principal de uma tabela);
• table-row: estiliza o elemento como se fosse uma tag tr (linha de tabela);
• table-cell: estiliza o elemento como se fosse uma tag td(célula de tabela);
• table-row-group: estiliza o elemento como se fosse uma tag tbody (grupo de células que formam o "corpo" da tabela);
• table-header-group: estiliza o elemento como se fosse uma tag thead (grupo de células que formam o cabeçalho da tabela);
• table-footer-group: estiliza o elemento como se fosse uma tag tfoot (grupo de células que formam o rodapé da tabela);
• table-caption: estiliza o elemento como se fosse uma tag caption (legenda de tabela);
• table-column: estiliza o elemento como se fosse uma tag col (coluna de tabela);
• table-column-group: estiliza o elemento como se fosse uma tag colgroup (grupo de colunas);

Aplicando o CSS ao HTML

O CSS necessário para fazer o nosso layout de exemplo ficar com 3 colunas é muito simples:

#site {
    width: 960px;
    margin: 0 auto;
}

#corpo {
    display: table;
}

#menu, #conteudo, #sidebar {
    display: table-cell;
}

#menu {
    background: #e5e5e5;
    width: 180px;
    vertical-align: top;
}

#sidebar {
    width: 120px;
    background: #e5e5e5;
}

Veja o exemplo montado aqui

E Pronto! Repare que eu não defini uma largura para o elemento #conteudo, ele se adapta automaticamente de acordo com a largura das outras "células" da tabela, o que é ótimo para flexibilidade nos layouts.

Tabelas implícitas

Um ponto importante e muito útil das tabelas CSS é o conceito de "tabelas implícitas". O que isso quer dizer é que o navegador interpreta os elementos faltantes de uma tabela, possibilitando fazer mais com menos código.

Repare neste trecho do HTML do exemplo:

<div id="corpo" class="grupo">
    <div id="menu">...</div>
    <div id="conteudo">...</div>
    <div id="sidebar">...</div>
</div>

Perceba que utilizamos display: table para o corpo e display: table-cell para as colunas. Neste caso faltaria um elemento com display: table-row para completar a estrutura de uma tabela. Porém, mesmo sem este elemento o navegador interpreta corretamente e a "tabela" é mostrada da forma desejada. Com isso, o elemento table-row faltante fica apenas implícito no código.

Preparando para navegadores antigos

Assim como várias técnicas de montagem de sites, as tabelas CSS também tem o seu porém. Elas possuem suporte nos principais navegadores atuais (incluindo Internet Explorer 8) mas os navegadores Internet Explorer 7 e Internet Explorer 6 (quem diria?) não irão fazer nada para nos ajudar.

Portanto, para estes navegadores, basta um pouco de CSS através de comentários condicionais. Neste exemplo estou colocando todos os estilos no cabeçalho da página, mas em um site normal é recomendável chamar arquivos externos de CSS com a tag link.

<!-- Estilos para IE6 e IE7 -->
<!--[if lte IE 7]>
<style>

#corpo {
    overflow: auto;
    background: url(../../imagens/blog/tabelas-css/fundo_colunas.png) repeat-y; /* colunas falsas */
}

#menu, #conteudo, #sidebar {
    float: left; /* como display: table não funciona nestes navegadores, uma alternativa é usar float */
}

#conteudo {
    width: 660px; /* temos que fixar o tamanho desta coluna, assim como #menu e #sidebar */
}

#menu li {
    display: inline; /* resolve o problema de line-height que acontece em listas no IE6 */
}

/* clearfix IE7 */
*:first-child+html .grupo {
    min-height: 1px;
}

/* clearfix IE6 */
* html .grupo {
    height: 1%;
}

</style>
<![endif]-->

Conclusão

Espero que com esta breve demonstração você também comece a utilizar tabelas CSS nos seus projetos. A técnica é simples e apresenta muitas possibilidades interessantes, além de evitar aquela dor de cabeça que às vezes temos usando floats. A utilização de floats ou técnicas semelhantes é um "mau necessário" para os navegadores mais antigos como Internet Explorer 7 e inferiores, mas isto não é motivo para deixarmos de utilizar as ferramentas à nossa disposição.