Tutorial – Criando layout tabular com a tag div e com a propriedade CSS display:table

Esta é uma dica que eu estava devendo há meses para meu amigo Sérgio Sansevero, e como ele já me pediu uma referencia que pudesse guardar para a explicação de alguns conteúdos, estou começando a postar com este tutorial, para que a referencia que ele precisa passe efetivamente a existir.

Hoje em dia é completamente fora dos padrões da web utilizar tabelas (<table></table>) para a criação de layouts de páginas, por definição tabelas somente devem ser utilizadas para conteúdo que sejam tabulares, enquanto div deve ser utilizada para construção de layouts.

Desta forma, a fim de ajudar os desenvolvedores a se livrarem do hábito de utilizar tabelas para construção de layouts, devido a facilidade de manipular alguns conteúdos em seu interior, venho mostrar a propriedade CSS display:table.

Com ela, é possível fazer com que um conjunto de divs seja renderizado pelo navegador como se fossem tabelas, permitindo que layouts sejam criados com div mantendo a aparência tabular desejada. O único cuidado que se deve ter é para não colocar conteúdo tabular que deveria estar de fato em uma tabela (<table>) dentro de um conjunto de divs aninhadas.

O código a seguir ilustra o procedimento de criar botões centralizados em uma div com display:table contendo duas divs internas com propriedade display:table-cell.

O HTML ficaria assim:

<div class="container ">

    <div class="table">

        <div class="cell-enviar"><input type="button" value="Enviar"></div>

        <div class="cell-limpar""><input type="button" value="Limpar"></div>

    </div>

</div>

E os estilos css utilizados são os seguintes:

.container

{

margin:auto auto; width:50%;

}

.table

{

display: table;

background-color:red;

width:100%;

border:2px solid gray;

}

.cell-enviar

{

display: table-cell;

background-color:#aaa;

width:50%;

text-align:center;

}

.cell-limpar

{

display: table-cell;

background-color:#ccc;

width:50%;

text-align:center;

}

Desta forma o navegador entende que a div pai deve ser renderizada como uma tabela enquanto suas divs filhas devem ser renderizadas como células da “tabela”.

O resultado final é o apresentado abaixo:

Obrigado pela atenção e bom trabalho!!