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

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

[Tom:-)]

Ja widziałem to trochę inaczej, że tagi nie były zagnieżdżone i chyba chodziło tu o pozycjonowanie bo tak to ja wiem że można

Ten post edytował Tom:-) 16.02.2010, 23:35:26

[Wilk002]

Każdy tag nie musi być zagnieżdżone ale tak było mi łatwiej i szybciej pokazać jak to zrobić. Można to zrobić tylko za pomoca position: ... , wtedy rozkładasz gdzie i jak chcesz każdego diva.

[Tom:-)]

A możesz pokazać jak?

[krzysztof_kf]

Kod

<style type="text/css">
  #column {
  width: 1000px;
  margin: 0 auto;
  }
  
  #column-left {
  width: 200px;
  float: left;
  }
  
  #column-center {
   width: 500px;
   float: left;
   }
  
  #column-right {
   width: 300px;
   float: left;
   }
  </style>

i potem odwołanie do css

<div id="column">
<div id="column-left">
jakaś tam zawartość
</div>

<div id="column-center">
jakaś tam zawartość
</div>

<div id="column-right">
jakaś tam zawartość
</div>

Ten post edytował krzysztof_kf 17.02.2010, 17:43:10

[altruista2]

Pytanko: Czemu nie zostawisz tabelek? Co złego w tabelkach?

Poza tym mogłeś po prostu zamienić
<table> na <div style="display:table">
<tr> na <div style="display:table-row">
<td> na <div style="display:table-cell">

[Tom:-)]

Mnie chodzi o to jak to zapiać z position. A w tabelkach no to jest prosta odpowiedź czemu nie chcę

[DiH]

Google nie boli:
http://www.google.pl/search?hl=en&q=sz...mp;aq=f&oq=

Nie po to się odchodzi od tabelek, żeby je potem symulować ;D

Całkiem ładnie jest to opisane tutaj: http://www.kurshtml.boo.pl/css/staly_szablon,szablon.html.

Ten post edytował DiH 18.02.2010, 02:06:00

[Tom:-)]

Ale ja chcę wiedzieć jak powyższy przykład zapisuje się semantycznie na <div>