CSS: diseño de columna vertical sin <table>

Question

Jun 04, 2012, 09:53 PM

CSS: diseño de columna vertical sin <table>

Ok, me apoyé en html & css en 2001. Estaba acostumbrado a hacer algo como esto (para crear un sitio web con un diseño de "columna vertical"):

<html>
<head>
    <title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
    <tr>
    <td id="header" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / header -->

<!-- / content -->
    <tr>
    <td id="col1" name="menu"><!-- content code/php include --></td>
    <td id="col2" name="content_left"><!-- content code/php include --></td>
    <td id="col3" name="content_right"><!-- content code/php include --></td>
    </tr>
<!-- / content -->

<!-- footer -->
    <tr>
    <td id="footer" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / footer -->
</table>
</body>
</html>

Fácil, todo se alinea automáticamente de la forma que quiero, sin dolor de cabeza, etc. La vida era buena en ese entonces. SIN EMBARGO, no hace mucho tiempo, leí que este enfoque ya no debería usarse. Iba a probar una nueva forma usando un montón de div's, pero a la validación de w3c & w3c no le gusta que uses elementos de bloque como elementos en línea ... ¡¡¡WTF !!!

Entonces ... mi frustración me llevó a preguntarles:

¿CÓMO? ¿Cómo lograr algo así de "manera moderna" ... lo más fácil posible? ¿Tiene html 5 una mejor manera?
¿POR QUÉ? ¿Por qué es que ahora no debemos usar este enfoque de tabla para obtener un "diseño de columna vertical" en un sitio web?