HTML Tutorial #21 - Layout

[Vampire Andy 229]

Un layout nu are prea multe opţiuni. Pe de altă parte un table este foarte folositor. Într-un tabel poate fi introdus cam orice element, chiar şi un alt tabel.

 

<table id="shell" bgcolor="black" border="1" heigh="200" width="300">

<tr><td> <table id="inner" bgcolor="white" heigh="100" width="100">

<tr><td>Tables inside tables!</td></tr>

</table> </td><tr></table>

Copiea cest cod în notepad şi salvează-l ca un document .html.

 

HTML - layout standard

 

Un layout standard constă într-un banner în zona de sus a paginii un meniu în partea din stânga iar zona de conţinut în partea de dreapta-mijloc. Acesta este cel mai clasic layout pentru un websiteă .

 

<table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400">
<tr height="50"><td colspan="2" bgcolor="white"> 
<table title="Banner" id="banner" border="0"> 
<tr><td>Place a banner here</td></tr> 
</table>
</td></tr> <tr height="200"><td bgcolor="white"> 
<table id="navigation" title="Navigation" border="0"> <tr><td>Links!</td></tr>
<tr><td>Links!</td></tr> <tr><td>Links!</td></tr>
</table> 
</td><td bgcolor="white"> <table title="Content" id="content" border="0"> <tr><td>Content goes here</td></tr> 
</table> 
</td></tr></table>

 

Aceasta este o abordare de bază . Dacă vei folosi aceste layout-uri în paginile tale, va deveni foarte complex pe măsură ce vei adăuga conţinut. Cu toate acestea este important să specifici înălţimea (height) şi lăţimea (width). Cu cât vei fi mai specific în stabilirea acestor atribute cât şi a altora cu atât mai puţine bug-uri vei avea.

 

<table id="shell" title="Shell" height="250" width="400" border="0" bgcolor="black" cellspacing="1" cellpadding="0"> <tr height="50"><td bgcolor="white">

<table title="banner" id="banner">

<tr><td>Banner goes here</td></tr>

</table>

</td></tr> <tr height="25"><td bgcolor="white">

<table title="Navigation" id="navigation">

<tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr>

</table>

</td></tr> <tr><td bgcolor="white">

<table title="Content" id="content"> <tr><td>Content goes here</td></tr>

</table> </td></tr></table>