HTML for the complete beginner

Ez HTML - Tables 2

I can't tell you how you should set your web page/site up, no one can, but I can give you a few pointers or ideas and hopefully lead you in the right direction. There are no right ways, just some better and easier than others.

Here are a few ideas of how you could lay your site out. None of these set ups could be right for your site but knowing how to make multi style sites can only be a bonus, plus you never know your friend may want you to make them a web site after seeing how great yours is laid out.

For these above examples, and the layout of this site, I will be showing you how they would be set up one by one using graphics for samples until we finish each layout then you'll find a link to see that style as it would look in a web page form. You can read through the whole page (advised) or jump to the layout description by clicking on the graphics above.

The main reason I wanted you to see that is to hope you'll notice I have the page in two parts, the top banner table and the contents table.
This is a major part missed by many people, they just use one massive table and takes forever to load, or locks up your page due to mismatched or forgotten tags. Tables are really the backbone to HTML, so learn these well and when you see a site, look at it and see if you can figure out how it was done.

These examples are just using a bgcolor but you can of course replace this with a background image, the secret to lining them all up is to keep the table tight, always use the border="0" cellspacing="0" cellpadding="0" in the table tag and keep the contents on the same line as the <td> </td> tags, like so;

<td>This is good layout</td>
<td> This is bad layout, notice the spaces before and after the text </td>
<td>
This is the worst layout
</td>

Lets make this layout ...

First up, the basic side bordered background with header bar, or title bar. This layout is very similar to the side bordered background, however it has one extra important part, a separate top table. We could make all of these examples from one table using colspan and/or rowspan but we dont want to.

This is the trick, the more content and graphics you have on your page the longer it takes to load, especially in tables as the browser has to read all the content before displaying it. So if we have a separate table above the main table the browser will display this while loading the next big table giving your viewers something to read or look at.

For the top table we use:
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="??" bgcolor="#??????" background="????.???"><tr>
<td>Text or graphic if any or  </td>
</tr></table>
Notice we have put the background image in the table tag, this way it will tile over the whole area so we can add an icon, or another graphic on top.

For the second table we set it up the same way we do a side bordered background, with the use of a clear spacer, like so;
<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr>
  <td><img border="0" width="110" height="2" src="clearspacer.gif"> Or text or graphic links</td>
  <td> Page contents go here</td>
</tr></table>

Now I guess your wondering where the main tables background image is, if your going to use a background image we put this in the body tag, or we can put it in the td cells as background images, body method is best. So the whole setup would now look like this:

<html>
<head>
<title>Your title</title>
</head>
<body bgcolor="??????" background="???.???" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="??" bgcolor="#??????" background="????.???"><tr>
  <td>Text or graphic if any or  </td>
</tr></table>

<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr>
  <td><img border="0" width="110" height="2" src="clearspacer.gif"></td>
  <td>Page contents go here</td>
</tr></table>
</body>
</html>

And with this set up we use the secret weapon, the (topmargin="0" leftmargin="0" marginheight="0" marginwidth="0") in the body tag which takes away the default border the browser give to web pages, these work in Internet Explorer and Netscape.

The   is used for tables td cells if there is no content, otherwise the background wont show up in browsers like Netscape. The   is a blank space with can be made bigger or smaller with the font tag size.

Lets now make this layout ...

This layout is very similar to the above but has three cells wide in the main section. This version differs mostly because we can't really use the background image in the body tag as it wont suit multi sized screen sizes, so we add the backgrounds (if used) into the td cells or use the bgcolor in the cells.

These are of course the basic of examples, we can always include nested tables (tables in tables) in either or both side cells to keep the contents of them together. Try not to make it to deep, to many nested as it would be a nightmare to edit (like these pages) and will cause slower loading time as the browser has to get all the tables information before loading them.

For the second table we set it up similar to that of a side bordered background without using the body background tag and using an extra cell, like so;
<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr>
  <td bgcolor="??????" background="???.???"><img border="0" width="110" height="2" src="clearspacer.gif">Or text or graphic links</td>
  <td bgcolor="??????" background="???.???">Page contents go here</td>
  <td bgcolor="??????" background="???.???"><img border="0" width="110" height="2" src="clearspacer.gif">Or text or graphic links</td>
</tr></table>

Some browsers like Netscape doesn't like the color-graphic-color combination, it will show up as color-graphic-graphic. The best way around this that I have found is to make a 40 x 40 graphic of the color you wish to use, and use that as a background image instead of the bgcolor (still use the bgcolor tag). The colored graphic will tile so no one will know you are using it.
Here is what the complete layout would look like:

<html>
<head>
<title>Your title</title>
</head>
<body bgcolor="??????" background="???.???" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<table border="0" cellspacing="0" cellpadding="0" width="??" height="??" bgcolor="#??????" background="????.???"><tr>
  <td>Text or graphic if any or  </td>
</tr></table>

<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr>
  <td bgcolor="??????" background="???.???"><img border="0" width="110" height="2" src="clearspacer.gif">Or text or graphic links</td>
  <td bgcolor="??????" background="???.???">Page contents go here</td>
  <td bgcolor="??????" background="???.???"><img border="0" width="110" height="2" src="clearspacer.gif">Or text or graphic links</td>
</tr></table>
</body>
</html>

This is starting to look a bit complicated with all these tags and things but with practice will become second nature, now I don't want to alarm you but should point out one missed </td> tag can stop the whole page from displaying, so always double check you have a <start> and </finish> tag for every set of tags you use. The way I do it is type in the tags, start and finish and then type in the contents, otherwise I could start off the line but then get called away, when I come back would forget where I was up to so would carry on as if I'd finished the line I was working on, thus making the page not display.

Lets now make this layout ...

This layout would be a good one for a fancy graphic layout, but I have just kept it basic to give you an idea of what you can do. Your mind is the only limit, isnt that a scary thought.
This method still uses the top table but is done is three cells instead of the normal one cell. This layout could also be cut into a third separate table, the bottom row. Which I'll be showing you for this example.

This example I have used link buttons on either side, this of cause could be anything you wish.

For the top table we use:
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="??" bgcolor="#??????"><tr>
  <td width="??%" bgcolor="#??????">Text or graphic if any or  </td>
  <td width="??" bgcolor="#??????" background="????.???">Text or graphic if any or  </td>
  <td width="??%" bgcolor="#??????">Text or graphic if any or  </td>
</tr></table>

Notice we have put the background image in only the middle td tag but have used the bgcolor in them all, this way the middle background image will tile over that cell but the outer cells will remain the bgcolor (Note: can be wise to make a 40 x 40 graphic of the bgcolor as some browser don't like certain combinations). Using the background image in the center cell also allows use to add an icon, or another graphic on top.

This example uses the width="100%" in the table tag like all our examples do, and also states the td width. This layout makes the outside td cells percentage widths and the inner (middle) cell a fixed width, this giving us the same look on any browser.

The middle section is much the same setup as the top or bottom, but we don't want to use the height tag anywhere as the contents will adjust this for us. We may however want to align the side cell contents to the top by using valign="top" in the side td cells, like so;

<table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#??????" background="????.???"><tr>
  <td width="??">Text or graphic links, if any or  </td>
  <td>Your main contents go here</td>
  <td width="??">Text or graphic links, if any or  </td>
</tr></table>

You will notice this layout is different to all the others so far, we have used the background image in the table tag as it is the same throughout the entire table section. The side cell widths are fixed with the middle section having no width at all, you could add width="100%" but isn't really needed as it gets what's left over, depending on the size of the screen/browser your viewer is using. If you use a set up like this but don't use links or graphics in the side, use a clear spacer to get the required width needed.

The bottom table (third table) is the same as the first (top) table:

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="??" bgcolor="#??????"><tr>
  <td width="??%" bgcolor="#??????">Text or graphic if any or  </td>
  <td width="??" bgcolor="#??????" background="????.???">Text or graphic if any or  </td>
  <td width="??%" bgcolor="#??????">Text or graphic if any or  </td>
</tr></table>

The bottom section usually just contains your copyright, made by contents but you can add anything

The whole lot together would look like this:

<html>
<head>
<title>Your title</title>
</head>
<body bgcolor="??????" background="???.???" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="??" bgcolor="#??????"><tr>
  <td width="??%" bgcolor="#??????">Text or graphic if any or  </td>
  <td width="??" bgcolor="#??????" background="????.???">Text or graphic if any or  </td>
  <td width="??%" bgcolor="#??????">Text or graphic if any or  </td>
</tr></table>

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="??" bgcolor="#??????" background="????.???"><tr>
  <td width="??">Text or graphic links, if any or  </td>
  <td>Your main contents go here</td>
  <td width="??">Text or graphic links, if any or  </td>
</tr></table>

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="??" bgcolor="#??????"><tr>
  <td width="??%" bgcolor="#??????">Text or graphic if any or  </td>
  <td width="??" bgcolor="#??????" background="????.???">Text or graphic if any or  </td>
  <td width="??%" bgcolor="#??????">Text or graphic if any or  </td>
</tr></table>
</body>
</html>

It now looks quite confusing with all three tables in there, but I'm not trying to confuse you, I have shown the tables with the td's indented, when you write up this code you may want to add comments so you know where each one starts and finishes or indent the middle table more than the rest.

The way I made this site is similar to all of the above, I have used one top section but 3 middle sections (one column for the vertical line beside the navigation) And a bottom section for copyright and things. If you want to check out the source code of this site, pick a small page (like the quiz pages) so the actual content wont be so confusing - I use the same layout through out the site

Content is the main ingredient for a web site, but the way you display it, is just as important. Apart from making it interesting, make it easy to follow, use the same layout throughout the site with easy to navigate pages. Different layouts throughout your site will confuse people to where they think they have left your site and are now viewing someone else's.

Tables are amazing things, because there are so many things and ways we can do things, never give up, never be afraid to try new ways. Never think that you know all you need to know. There is always more to learn.

Summary

We have seen how to set up a few styles of web pages using tables.
We have seen how to make the tables sit flush against the browsers sides

Exercise

This is something you can do over the rest of these lessons, draw or scribble a layout you'd like to use for your web site and then turn it into a web pages using tables and everything else you've learnt and will learn.

No quiz for this section.

Tables 1 «- Top of Page -» Frames