HTML - Layouts
A layout does not have many options. On the other side, a table is very useful.
In a table you can add almost every element, even another table.
<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> |
Try copying this into a notepad file, then save it as .html and see what happens!
HTML - Standard layout
A standard layout is composed of a banner in the upper part of the page, a menu in the left part, and the content zone in the middle or in the right. This is the most classic layout for a web site, and, in my opinion, a representative model.
<table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400"> |
Display
This is a basic approach. As you will see if you use these layouts in your web page, it will become very complex as you add more content. Nevertheless, it is very important that you specify the height and the width. The more you will be more specific in establishing these attributes and not only these, the less bugs you will have.
<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> |
Study this code a little bit, organize it so that you will be able to understand it. Copy it in a new document to see it.