Real World Tables

A Step-by-Step Progression

In the following examples, I demonstrate how to create real-world tables, using a step by step progression based on the following design specs:

In the above proofs, I have demonstrated how a basic design is to be broken down into tables and nested tables. The red guidelines mark the rows and columns of the tables. Notice how all spacing between elements is created using table cells filled with spacer GIFs; this allows me to vary the spacing if a client wishes to nudge elements around, pixel by pixel, without resorting to complete CSS-P-based design. Notice also how I utilize colored cells, background colors, and flat-color GIFs to reduce file size; the entire "weight" for the finished design, including HTML text, all graphics, and extra graphics for the image-switch rollovers, comes to about 25K per page.

Step by Step

In an effort to expose my thought process, I have broken this project down into its component tasks, one page to a task. By completing, testing, and debugging each element of the larger table(s) individually, piece by piece, I ensure that I don't have to analyze the ENTIRE body of code for mistakes; I only have to debug and review the 5-10 lines that I have coded during that step. Needless to say, I highly recommend this procedure of piece-by-piece coding to all of my students!

Each one of the following examples has been completed. Follow the links below, viewing the source code for each page so that you can analyze what I've done. The complete page sequence can be downloaded along with the other exercise materials from the exercise page immediately following this lesson.

At this point, you've finished. However, I felt compelled to add two more steps to this process which would occur in a real-world setting: JavaScript rollovers (image switches and status messages), and CSS (Cascading Style Sheets) to set fonts, etc.

Main Menu