HTML - 10. Divisões

É comum na Web o desuso de tabelas para montar layout, e atualmente até conteúdos com o uso das tags de HTML div, que é um elemento divisor de conteúdos, e é excelente para utilizar outros conteúdos dentro dele, e é fácil sua referência por CSS ou JavaScript.

<div id="cabecalho1" class="cabecalho">
    <h1>Olá mundo!</h1>
</div>

Então com a div, podemos mapear rapidamente por CSS (pelo atributo class) ou JavaScript (usando o atributo id).

Para montar um layout simples com 2 colunas, veja como seria usando uma tabela, e com div:

<table width="100%">
  <tr>
    <td>Coluna 1</td><td>Coluna 2</td>
  </tr>
</table>

E agora com div:

<div style="width:100%">
  <div style="float:left;width:50%;">
    Coluna 1
  </div>
  <div style="float:left;width:50%;">
    Coluna 2
  </div>
</div>

Em primeira vista, parece que o código ficou maior, porém utilizei o atributo style no lugar de class apenas para representar o mesmo exemplo. Usando class, os elementos style estariam no arquivo de CSS, sendo fácil sua reutilização. Muitos acham mais simples fazer algo como:

<div class="cabecalho">
  <div>
    Coluna 1
  </div>
  <div>
    Coluna 2
  </div>
</div>

E sim, isto poderia ser mapeado pelo CSS, e inserir os parâmetros style em outro lugar, deixando o código mais limpo.

Por isto utiliza-se muito o termo "tableless" para esta metodologia, pois facilita a manutenção do site.

Repare que quem está fazendo a coluna de fato, é o tamanho de 50%. Para 3 colunas, teria que usar valores divididos por 100, ou seja, 33.33%, ou para 4 colunas, 25%. Pode ser útil ver mais a respeito de grid system, há vários frameworks que otimizam este trabalho deixando um CSS pronto, e basta usar os valores no atributo class de sua tag div.