Data publikacji: 2007-01-14
Autor: Wiklin

Wielu webmasterów buduje strukturę strony używając tabeli. Jest to złe rozwiązanie. Zmniejsza ono dostępność strony i przeczy idei semantyczności - każdy znacznik HTML ma swoje własne zastosowanie.

Akurat tabele służą do prezentacji danych tabelarycznych. Do tworzenia struktury strony odpowiednie są DIV'y - tagi wyświetlane w bloku, tzn. zajmujące 100% dostępnej szerokości i mające długość taką, jak ich zawartość.

Na samym początku rozpiszemy znaczniki składające się na stronę. Nie zapomnijcie dodać deklaracji DTD oraz znaczników html i body!

<h1>Nagłówek</h1>
<div id="text">Treść strony</div>
<div id="menu">Nawigacja strony</div>
<div id="stopka">Stopka strony</div>
Oprócz tagów DIV pojawił się tu h1, tj. nagłówek pierwszego stopnia. Możemy w nim zamieścić najważniejsze informacje dotyczące strony, np. jej nazwę.

Teraz oddzielne bloki wyświetlają się pod sobą. Jednak wystarczy kilka linijek kodu CSS, aby menu i miejsce na treść wyświetlały się obok siebie.

body {width: 600px; margin: 0 auto;}
h1 {margin: 0; background: #EEE;}
#text {width: 400px; background: #F7F7F7; float: left;}
#menu {width: 200px; background: #800; float: left;}
#stopka {background: #AAA; clear: both;}
Jest to kod CSS, który zrobi to o czym mówiłem - wyświetli menu obok treści.

Użyliśmy tu body, aby ograniczyć szerokość strony i ją wyśrodkować. margin: 0 auto; zeruje margines górny i dolny, a lewy i prawy ustawia jako auto, czyli zlicza ilość wolnego miejsca w oknie przeglądarki i dzieli je równo pomiędzy te dwie strony, dzięki czemu strona jest wyśrodkowana.

DIV'om menu i text dałem ograniczoną szerokość, aby zmieściły się w jednej linii. Spróbujcie zwiększyć szerokość menu - zjedzie wtedy pod treść.

Float: left; ustawia opływanie. Możemy dzięki niemu sprawić, aby elementy "wpuścić" w np. treść. Zastosowanie float: left; dla naszego menu i treści sprawi, że te DIVy będą się kończyć tam, gdzie są ich widzialne krawędzi i, dzięki odpowiedniej wielkości, ustawią się obok siebie.

Pozostaje jeszcze do omówienia stopka. Dostała ona clear: both;. Sprawia to, że nie może być opływana. W taki sposób nie będzie "szukała" miejsca, tylko do razu ustawi się pod DIVami z włączonym opływaniem. O to nam chodziło.

To już wszystko. Struktura strony jest gotowa! Do jej przygotowania nie wykorzystaliśmy tabel, które przecież do tego nie służą. Teraz wystarczy, że dostosujesz ten kod pod swoje potrzeby i będziesz mógł się cieszyć stroną dostępną i semantyczną.

P.S. Jeśli deklaracja DTD będzie inna niż XHTML, to strona nie zostanie wyśrodkowana w IE.