Blog Código Franco

sexta-feira, 13 de setembro de 2013

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!!


Se você gostou do nosso conteúdo você pode nos ajudar. Qualquer valor é bem vindo e ajuda a manter nossos editores e nossa hospedagem.



Nenhum comentário:

Postar um comentário