Prestaňte používať tabuľky na delenie stránky

HTML -> Ukážkové kódy v HTML -> Prestaňte používať tabuľky na delenie stránky

Ak stále používate značku table alebo dokonca frameset na rozdelenie stránky a oddelenie menu od textu stránky, tak by ste mali prejsť na značku div. Pomocou nej sa stránka zobrazí rýchlejšie a vyhnete sa problémom, ak si Vašu stránku bude niekto pozerať prehliadačom bez podpory značiek table alebo frameset.

V príklade si ukážeme ako jednoducho rozdelíme stránku na dve časti - menu a text.

<div style="position: relative; width: 10em; height: auto; left: 0; float: left; text-align: center;">
ľavé menu<br>
ľavé menu<br>
ľavé menu
</div>

<div style="border-left: dashed 1px; position: relative; padding-left: 20px; padding-right: 10px; margin-left: 10em; width: auto;">
hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky
</div>

<div style="text-align: center; margin-top: 1em;">
<a href="http://www.kasman.sk">www.kasman.sk</a>
</div>

Celý tento kód môžeme prepísať ešte elegantnejšie, ak si ho rozdelíme na dva súbory: stranka.htm a styl.css

styl.css:

.lavy-stlpec {position: relative; width: 10em; height: auto; left: 0; float: left; text-align: center;}

.hlavny {border-left: dashed 1px; position: relative; padding-left: 20px; padding-right: 10px; margin-left: 10em; width: auto;}

.pata {text-align: center; margin-top: 1em;}

stranka.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
<LINK href='styl.css' type='text/css' rel=StyleSheet>
</head>
<body>

<div class="lavy-stlpec">
ľavé menu<br>
ľavé menu<br>
ľavé menu
</div>

<div class="hlavny">
hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky
</div>

<div class="pata">
<a href="http://www.kasman.sk">www.kasman.sk</a>
</div>

</body>
</html>