Bookmark and Share

HTML - Page Layouts and Templates

HTML layout is very basic. Not many options exist with the body tag alone. Tables, on the other hand, are the bread and butter of HTML layouts. Any element may be placed inside of a table, including tables themselves!

Advertise on Tizag.com

HTML Code:

<table id="shell" bgcolor="black" border="1" height="200" width="300">
   <tr>
      <td>
         <table id="inner" bgcolor="white" height="100" width="100">
            <tr>
               <td>Tables inside tables!</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Tables inside tables:

Tables inside tables!

The white table (identified as inner) exists inside of the (shell) table, the black one. A light bulb should be going off inside of your head as you explore how this system will allow for the creation of limitless layouts.

HTML - Standard Layout

A fairly standard layout consists of a banner near the top, navigation, and your content or display box. These are the backbone to any great website.

HTML Code:

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

Basic Layout:

Content goes here

This approach is basic, yet organized. The code becomes complex rather fast, so you will need to be sure to properly assign height and width values to your tables as well. The more specific you are about heights and widths, the less room there will be for error and debugging.

HTML Code:

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

Basic Layout 2:

Content goes here

The code is quite a lot to look at, SO break it up and organize it in your own way to make things easier for you.

Bookmark and Share


Tips

  • Your code can become quite complicated rather fast. Keep an organized spacing system so it becomes easy to spot where one table ends and the other beings.
  • Use cellspacing to add usable borders to your content.
  • Keep things neat. Be creative, yet organized.


Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials