Buscar en este blog

jueves, 22 de noviembre de 2007

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

No hay comentarios: