Tables and Layouts

Web Developer

Home Instruction Assignments Grades Source Code Discussion Chat Syllabus Instructor Links Search Contact Us

Tables and Layouts

One of the first things web developers discovered when tables were introduced was that they could use tables to gain more control over where individual elements are laid out on the page. Even though this wasn't the original intent of tables (layout is a formatting issue, not a structural issue) layouts quickly became the chief use for tables.

In today's Internet world, all of the things that tables achieve for layouts can be accomplished using CSS - and then some. Tables, however, have been around longer and, as such, are supported by more browsers. The current statistics indicate that, as of this writing, around 98% of all web surfers use browsers that support some level of CSS. The tricky part is knowing which part. I suspect that most all of them support CSS Level 1 - the formatting rules. On the other hand, upwards of 20% of those same surfers do not support CSS Level 2 - which is what makes positioning possible. For now, anyway, using tables for positioning is still the best way to insure that most surfers will see your pages exactly as you've designed them.

In this lesson, We'll create a traditional two-column layout for a fictional company called Just-In-Time Software. JIT is a company specializing in creating custom software solutions that are cross platform and web-enabled. Let's start with our basic table:

Now let's add our color scheme by using a document-wide style for the links and bgcolor for the right column. Add this code for the style in the <head> of your page:

Then modify your table like this:

<table border="1" cellpadding="2" cellspacing="1" width="100%">
<tr>
<td width="125" bgcolor="#006600"> </td>
<td> </td>
</tr>
<tr>
<td width="125" bgcolor="#006600"> </td>
<td> </td>
</tr>
</table>
here's how it looks so far:

Now, let's put in a logo for JIT in the top right cell and center it in the cell by wrapping the image in a element whose align attribute is equal to "center":

Note that this document uses a relative path for the src attribute of the image. Now let's add a second image in the top left cell that JIT uses for a "logo" and set the valign attributes for the top row to "top":

Now, let's add the navigation structure to the bottom left column:

<table border="1" cellpadding="2" cellspacing="1" width="100%">
<tr>
<td width="125" bgcolor="#006600" valign="top" align="center"><img border="0" src="images/jitdisc.gif" width="103" height="85"></td>
<td valign="top">
<img border="0" src="images/jit.gif" width="400" height="100">
</td>
</tr>
<tr>
<td width="125" bgcolor="#006600" class="tabletext">
About Us 
<a href="story.htm">Our Story</a> 
<a href="mission.htm">Our Mission</a> 
<a href="vision.htm">Our Vision</a>
Services 
<a href="webdesign.htm">
Web Design</a> 
<a href="programming.htm">
Programming</a> 
<a href="consulting.htm">
Consulting</a> 
<a href="training.htm">
Training</a> 
<a href="hosting.htm">
Web Hosting</a>
Policies 
<a href="privacy.htm">
Privacy Policy</a> 
<a href="guarantees.htm">
Guarantees</a> 
<a href="terms.htm">
Terms & Conditions</a> 
<a href="use.htm">
Acceptable Use</a>

Contact Us 
<a href="custsupport.htm">Customer Support</a> 
<a href="techsupport.htm">Tech Support</a> 
<a href="sales.htm">Sales</a> 
<a href="resellers.htm">Resellers</a> 

</td>
<td class="tablebody">Content for each page will go here!
 By the way - the links don't work!
</td>
</tr>
</table>

Here's what we get:

About Us
Our Story
Our Mission
Our Vision

Services
Web Design
Programming
Consulting
Training
Web Hosting

Policies
Privacy Policy
Guarantees
Terms & Conditions
Acceptable Use

Content for each page will go here!

By the way - the links don't work!

Hey, that looks pretty good! Notice that we've used our two custom selectors for the contents of an entire cell by applying the style to the <td> element. All we need to do now is to clean up the borders, alignment, cellspacing, and cellpadding:

<table border="0" cellpadding="4" cellspacing="0" width="100%">
<tr>
<td width="125" bgcolor="#006600" valign="top" align="center"><img border="0" src="images/jitdisc.gif" width="103" height="85"></td>
<td valign="top">
<img border="0" src="images/jit.gif" width="400" height="100">
</td>
</tr>
<tr>
<td width="125" bgcolor="#006600" class="tabletext" valign="top">
About Us 
<a href="story.htm">Our Story</a> 
<a href="mission.htm">Our Mission</a> 
<a href="vision.htm">Our Vision</a>
Services 
<a href="webdesign.htm">
Web Design</a> 
<a href="programming.htm">
Programming</a> 
<a href="consulting.htm">
Consulting</a> 
<a href="training.htm">
Training</a> 
<a href="hosting.htm">
Web Hosting</a>
Policies 
<a href="privacy.htm">
Privacy Policy</a> 
<a href="guarantees.htm">
Guarantees</a> 
<a href="terms.htm">
Terms & Conditions</a> 
<a href="use.htm">
Acceptable Use</a>

Contact Us 
<a href="custsupport.htm">Customer Support</a> 
<a href="techsupport.htm">Tech Support</a> 
<a href="sales.htm">Sales</a> 
<a href="resellers.htm">Resellers</a> 

</td>
<td class="tablebody" valign="top">Content for each page will go here!
 By the way - the links don't work!
</td>
</tr>
</table>

About Us
Our Story
Our Mission
Our Vision

Services
Web Design
Programming
Consulting
Training
Web Hosting

Policies
Privacy Policy
Guarantees
Terms & Conditions
Acceptable Use

Content for each page will go here!

By the way - the links don't work!

OK! The results are now a template to build all of the other pages. All we'll need to do is put our content inside the last <td> element and it will display only in that column. All you'll need to do is copy the table and the style (or, better yet, link to the style) into any new file you create. Should you require the table to be longer (i.e. stretch below the bottom of the screen) just add some blank lines to the end of either column using  . It doesn't matter which column you add them to - they'll both stretch! You can see the entire code on the Source Code page - look for the Just In Time link. Feel free to look at the source code and borrow any of it that catches your eye.