Como Montar um Layout com Tabelas CSS
Novo curso: Seja um freelancer!
Clique aqui para mais informações
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>© 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 tagtable
(elemento principal de uma tabela);table-row
: estiliza o elemento como se fosse uma tagtr
(linha de tabela);table-cell
: estiliza o elemento como se fosse uma tagtd
(célula de tabela);table-row-group
: estiliza o elemento como se fosse uma tagtbody
(grupo de células que formam o "corpo" da tabela);table-header-group
: estiliza o elemento como se fosse uma tagthead
(grupo de células que formam o cabeçalho da tabela);table-footer-group
: estiliza o elemento como se fosse uma tagtfoot
(grupo de células que formam o rodapé da tabela);table-caption
: estiliza o elemento como se fosse uma tagcaption
(legenda de tabela);table-column
: estiliza o elemento como se fosse uma tagcol
(coluna de tabela);table-column-group
: estiliza o elemento como se fosse uma tagcolgroup
(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;
}
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.
Novo curso: Seja um freelancer!
Clique aqui para mais informações