HTML. div en lugar de table II

La distribución del contenido html es posible sin el uso de tablas.

En el ejemplo podemos distribuir el contenido típico de cabecera, menu a la derecha y contenido a la izquierda.

Con el uso de los estilos
float: left;
float: right;

clear: left;
clear: both;

Podemos distribuir el contenido de nuestra web sin necesidad de tablas.

Echar un vistazo al ejemplo más completo en HTML organizar el contenido con divs

También ejemplos visuales de divs con distintos css en la propiedad de display

Y cómo no la w3c con su guía de referencia rápida de css y xhtml:
Guía de Referencia CSS 2.1
Guía de Referencia XHTML


<div id="cabecera" style="border: 1px solid blue;">
cabecera
</div>
<div id="cabecera2" style="border: 1px solid blue; clear: both;">
cabecera2
</div>
<div id="menu" style="float: left; border: 1px solid blue; width: 200px;">
<div>menu 1</div>
<div>menu 2</div>
<div>menu 3</div>
<div>menu 4</div>
</div>
<div id="contenido" style="border: 1px solid blue; margin-left: 225px;">
contenido1
contenido2<br />
<div>contenido3</div>
<div>contenido4</div>
</div>
<div id="derecha" style="float: right;">
derecha
</div>

<div id="pie" style="border: 1px solid blue; clear: both">
pie
</div>
<div id="tabla" style="float: left; margin-top: 10px;">
tabla
<div style="float: left; border: 1px solid blue; width: 50px;">
A
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
B
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
C
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
D
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
E
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
F
</div>
<div style="clear: left;">
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
H
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
I
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
J
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
K
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
L
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
M
</div>
</div>

Visita también la parte I de este mismo tema.