HTML. div en lugar de table

Podemos organizar el contenido html en lugar de con table con div.
Es muy útil ya que nos enseña a manejar el contenido como recomienda la w3c.
Muchas páginas se nos muestran ya sin usar ni una sola tabla, visita www.php.net y verás como no hay un solo tag table, ni tr, ni td

Este apunte lo recogí de
www.anieto2k.com


Solución inline-block

//CSS
.table { }
.table .row { }
.table .row .cell { display: inline-block; }
//HTML
<div class=”table”>
<div class=”row header”>
<span class=”cell” style=’width:50px;’>Header Column 1</span>
<span class=”cell” style=’width:50px;’>Header Column 2</span>
</div>
<div class=”row body”>
<span class=”cell” style=’width:50px;’>Body Column 1</span>
<span class=”cell” style=’width:50px;’>Body Column 2</span>
</div>
</div>

Esta solución, funcionará en la mayoría de navegadores, aunque rompe la regulación de la W3C ya que estamos haciendo que los <span /> sean elementos de bloque.
Solución float

//CSS
.table { }
.table .row { clear: left; }
.table .row .cell{ float: left; }
//HTML
<div class=”table”>
<div class=”row header”>
<span class=”cell” style=’width:50px;’>Header Column 1</span>
<span class=”cell” style=’width:50px;’>Header Column 2</span>
</div>
<div class=”row body”>
<span class=”cell” style=’width:50px;’>Body Column 1</span>
<span class=”cell” style=’width:50px;’>Body Column 2</span>
</div>
<div style=’clear:left;’></div>
</div>

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

Comentarios

Entradas populares de este blog

PHP. módulo de un "long". Calcular dígito control de IBAN.

HTML div organizar contenido