[HTML] Jak zapisać to w blokach DIV z table Opcje

[Tom:-)]

Parę lat temu kiedy jeszcze mama chodziła na wywiadówki tworzono strukturę strony za pomocą <table>. Od tamtego momentu minęło duuuużo czasu i się wiele pozmieniało.

Pytanie jest moje takie jak mam zapisać poniższy kod za pomocą bloków div? Mógł by mi ktoś to prze konwertować żeby zrozumiał filozofię div i nie tylko (...)

Kod

<div align="center">
    <table border="1" width="800" cellspacing="0" cellpadding="0" height="100" id="table1">
        <tr>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>
<div align="center">
    <table border="1" width="800" cellspacing="0" cellpadding="0" height="100%" id="table2">
        <tr>
            <td width="150">&nbsp;</td>
            <td>&nbsp;</td>
            <td width="150">&nbsp;</td>
        </tr>
    </table>
</div>
<div align="center">
    <table border="1" width="800" cellspacing="0" cellpadding="0" height="150" id="table3">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>

[Wilk002]

Nadziergałem to w chwilkę, można pewnie lepiej napisać ale to też dział (IMG:style_emoticons/default/winksmiley.jpg)

[HTML] pobierz, plaintext 
<div style="width: 800px; height: 800px; border-style: solid;">
 
<div style="width: 800px; height: 100px; border-bottom-style: solid; ">ddd</div>
<div style="height: 100px;">
	<div style="width: 400px; height: 100px; border-bottom-style: solid;border-right-style: solid;"></div>
	<div style="width: 400px; height: 100px; border-bottom-style: solid; margin-left: auto; position: relative; top: -102px"  ></div>
</div>
<div style="width: 800px; height: 500px; border-bottom-style: solid; "></div>
<div style="height: 100px;">
	<div style="width: 400px; height: 100px; "></div>
	<div style="width: 400px; height: 100px; border-left-style: solid; margin-left: auto; position: relative; top: -102px"  ></div>
</div>
</div>
[HTML] pobierz, plaintext 

Divy są bardzo wygodne to obsłudze tu akurat style css dałem bezpośrednio w nich ale można to wydzielić w osobnych plikach wtedy wygląda to tak:

[HTML] pobierz, plaintext 
<div  class="1">ddd</div>
<div class="2" >
	<div class="3" ></div>
	<div class="4" ></div>
</div>
<div class="5""></div>
<div class="6" >
	<div class="7" ></div>
	<div class="8" ></div>
</div>
</div>
[HTML] pobierz, plaintext 

Ogólnie wygląda to czytelnie i jest łatwe do modyfikacji bo zmieniasz tylko style. Divy mogą pływać po całym obszarze strony wystarczy dodać 2 linijki i zawartość diva zmienia położenie, przy strukturze <table jest to o wiele więcej zabawy.