CSS: układ kolumn pionowych bez <tabeli>

Ok, wychowałem html i css w 2001 roku. Przywykłem do zrobienia czegoś takiego (Aby utworzyć stronę internetową z układem „pionowej kolumny”):

<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>

Łatwo, wszystko jest automatycznie wyrównywane tak, jak chcę, bez bólu głowy itp. Życie było wtedy dobre. JEDNAK, nie tak dawno temu, przeczytałem, że to podejście nie powinno być dłużej stosowane. Miałem zamiar wypróbować nowy sposób, używając kilku div, ale walidacja w3c i w3c nie podoba się, gdy używasz elementów blokowych jako elementów wbudowanych ... WTF !!!

Więc ... moja frustracja doprowadziła mnie do pytania:

W JAKI SPOSÓB? Jak osiągnąć coś takiego w „nowoczesny sposób” ... tak łatwo, jak to możliwe? Czy HTML 5 ma lepszy sposób?
CZEMU? Dlaczego teraz nie powinniśmy używać tego podejścia tabelarycznego, aby uzyskać „pionowy układ kolumn” na stronie internetowej?

questionAnswers(3)

yourAnswerToTheQuestion