CSS: layout de coluna vertical sem <table>

Question

Jun 04, 2012, 09:53 PM

CSS: layout de coluna vertical sem <table>

Ok, eu inclinei html & css em 2001. Eu estava acostumado a fazer algo assim (Para criar um site com um layout de "coluna 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, tudo é automaticamente alinhado do jeito que eu quero, não css dor de cabeça, etc A vida era boa naquela época. No entanto, não há muito tempo, eu li que essa abordagem não deveria mais ser usada. Eu ia tentar uma nova maneira usando um monte de div's, mas a validação do w3c & w3c não gosta de você usar elementos de bloco como elementos inline ... WTF !!!

Então ... minha frustração me levou a perguntar a vocês:

COMO? Como realizar algo assim de maneira "moderna" ... o mais fácil possível? O html 5 tem um jeito melhor?
PORQUE? Por que é que agora não devemos usar essa abordagem de tabela para obter um "layout de coluna vertical" em um site?