Dave's Site - Millions Served.
<Table of Contents>

Chapter 19

Using Tables for Seamless Alignment, Loading Images, and creating the Navigation Bar

HTML Guide - Chapter 18 - Chapter 19 - Chapter 20 - Chapter 21 - Chapter 22 - Chapter 23

Adding the Header Graphic & Aligning Images

We set up the basic framework for our first page in Chapter 18.

Click here if you'd like to see the completed page we're working on in this chapter.

Here's the code so far:

<html> <head> <title>Dave Kristula's Internet Home</title> </head> <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF0000"> <div align="center"> <table border="0" width="730" cellpadding="0" cellspacing="0"> <tr><td> The actual page text and graphics are found inside here. </td></tr> </table> </div> </body> </html>

Now that we're ready to start our actual page, I'm going to save a new copy of the file as it is, and call it index.html. This name is the name used by most web servers for the main web page.

Now, after saving the page as index.html, I'm ready to start adding the contents of the page.

As mentioned before, I'm going to use a header graphic on every page. This graphic is going to be on all the pages we create for this site, and on the sub-pages it is going to need to link back to the main page. The graphic is 700 pixels wide, and 100 pixels high. To get rid of the colored link around the image, I'm going to add border="0" to the <img> tag. This is a very, very handy trick to remember.

Here's the HTML code for the header graphic and link. It's pretty simple:

<a href="index.html"><img src="topheader.gif" width="700" height="100" alt="Internet Home of Dave Kristula" border="0"></a>

Please note that I added an alt tag. This is really handy for people who are browsing without loading images.

Now, after the header graphic, my page is going to have a picture of me on the left, and the text "Welcome to the Internet Home of DAVE KRISTULA" on the right, beside the picture. If you've tried having text next to a picture, you know it doesn't always work right. To make it work right every time, you need a two-cell borderless table.

I'm going to want my picture and text in the center of the page, so I'm starting out with another <div> tag. I want this table to be a little bit snug, so I'm setting its total width to 75%. This 75% means 75% of the table -around- it, not the page, because we used a layout table of 730 pixels. In other words, it's only 75% of those 730 pixels.

Here's the outline for our table:

<table width="75%" border="0" cellpadding="3" cellspacing="5"> </table>

So what's cellpadding and cellspacing? Cellpadding is the buffer space around the contents of a cell. If you have a cellpadding of 0, everything is bumped right against the edge. Example:

cellpadding of 0
cellpadding of 3

Cellspacing, on the other hand, is how far apart each cell is from another cell. Here's two pictures, one with a cellspacing of 0, and one with a cellspacing of 5.

cellspacing of 0

cellspacing of 5

By now you should be able to recognize me on the street! Just kidding.

Aligning an Image with Text Beside it

Now that you know a bit more about tables, we can construct our own to align our graphic with the text next to it.

We're going to follow this format, inside the <table> we created a bit earlier:

... <tr> <td align="center"> picture </td> <td align="center"> text </td> </tr> ...

We want both the picture and text to be horizontally centered, so we add align="center". We could have used a <div align="center"></div> around the picture and around the text, but using align="center" inside the <td> takes up less code and accomplishes the same thing.

I've filled in the information for the image and text. Here's what our new table looks like:

<div align="center"> <table width="75%" border="0" cellpadding="3" cellspacing="5"> <tr> <td align="center"><img src="daveface.jpg" width="200" height="173" alt="Dave's Face"></td> <td align="center"><h1>Welcome to</h1><h2>the Internet Home of</h2> <h1>DAVE KRISTULA</h1></td> </tr> </table> </div>

I put a <div> around the entire table because I wanted the entire table to be centered on the page.

Caution: Always remember to set the width, height, and alt properties of an image.

Tip: You may ask why we use the title in text instead of just a graphic. The answer is: plain text is recognized by most search engines, while text -inside- a graphic is not.

Here's what our aligned graphic and text look like:

Dave's Face

Welcome to

the Internet Home of


You'll notice that there is a lot of space around the text in our headings. If you wish to make the space smaller, you must use CSS style sheets coding.

<shamelessplug> I highly recommend learning CSS from CSS: An Interactive Tutorial for Beginners after you finish this course. </shamelessplug>

Adding Content Links

Just three parts of our first page are left to create:

  • Content Links
  • Bottom Navigation
  • Contact Information and Copyright (if appropriate).

Before we make our links, we need to decide the names of the files for the rest of our pages. Here's what I picked:

  • About Me - aboutme.html
  • My Likes - likes.html
  • My Passions - passions.html
  • My Bookmarks - bookmarks.html

Here's the HTML code for the content links:

<h2>Site Contents: <ul> <li><a href="aboutme.html">Learn about Me</a> <li><a href="likes.html">Learn about What I Like</a> <li><a href="passions.html">Learn about Things I'm Passionate About</a> <li><a href="bookmarks.html">View my Favorite Bookmarks</a> </ul> </h2>

It's perfectly fine to link to a page before we create it--just remember to create the pages before you upload your site to the Internet--otherwise you'll get a 404 - File not Found error when you click on the link.

Why did I use a heading for the whole list? Without a style sheet (CSS), it's difficult to change font sizes. You -could- use the <font> tag, but current web design today recommends that you use CSS instead of a <font> tag, if possible.

Adding Bottom Navigation & Contact Information

It's good to have a text navigation at the bottom of the page, especially if your top navigation uses graphics. It's okay to shorten link titles here--just make sure each link topic is easy to understand.

Notice that the text "Home" has no link--that's because it's the page we're working on!

Last but not least--I added contact information. You could use a mailto link here, as covered in Chapter 4, but this increases your chances of getting spam. I chose to use a contemporary styling for the e-mail address. Here's the bottom navigation with the contact information included:

<h3 align="center">[ Home - <a href="aboutme.html">About Me</a> - <a href="likes.html">My Likes</a> - <a href="passions.html">My Passions</a> - <a href="bookmarks.html">My Bookmarks</a> ]</h3> Contact Me - webmaster /-at-/ davesite.com

You may also include a copyright notice if appropriate. Please consult a lawyer if you have questions about copyrights.

Rule of thumb: Assume any page, whether or not it has a copyright notice, is copyrighted.

View the completed index.html file.

Previous Chapter (18) | html index: html code guide | Next Chapter (20)
Copyright © 2005 Dave Kristula. All Rights Reserved.
All trademarks are the sole property of their respective owners.