Module 6 - Page 05 - Real World Tables Step-By-Step

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.

Step 1 -- First, we establish the BODY tag and its requisite attributes, ensuring that we have made no mistakes.
Step 2 -- Now, add the basic banner table at the top of the page.
Step 3 -- Add basic A (anchor) tags around each of the banner items, since we're going to use them as our navigation links throughout the site. Don't forget to add the BORDER attribute to each of the IMG tags, setting the value of BORDER equal to 0; otherwise, we'll get unwanted hot-link borders!
Step 3a -- As a final courtesy, add ALT attributes to each of the IMG tags, so that browsers without images turned on can still see some sort of navigation.
Step 4 -- Add the Main Table and its spacer GIF first row.
Step 5 -- Add the second, main row to the Main Table, putting in the gutters and main columns; don't forget to set the VALIGN attribute equal to "top" on the cells which will hold content other than spacer GIFs. Place test content in the left and right column cells.
Step 5a -- Add BGCOLOR to the right column cell in the Main Table; the color specified by the design is #9999CC.
Step 5b -- Increase the height of the spacer GIFs in the second row of the Main Table; I think 150 pixels is sufficient. This will force the page to always make the right colored column at least 150 pixels tall, which is the minimum height for that column.
Step 6 -- Add the Article 1 table (Left Column Nested Table) to the Main Column of the Main Table; just implement the first row of spacer GIFs. According to the design, that row should be about 2 pixels tall.
Step 7 -- Begin the second row of the Article 1 table. Again, don't forget your VALIGN atttributes in the cells containing visible content. I recommend that your TR tags open and close to the left, but that the TD tags holding your spacer GIFs should each open and close on the same lines; I also recommend this sort of TD syntax for the Capital M graphic. For the text in the main part of the article, you may open and close the TD to the left; use filler content there for now.
Step 8 -- Now, fill in the correct content for the first paragraph in Article One.
Step 9 -- Add the spacer row between the two paragraphs in Article 1 (row three); remember, spacer GIF rows should have ALL CODE for the row on ONE LINE.
Step 10 -- Now, add the last row in Article 1; use filler content for the text again. Don't forget your ALT attribute in the Capital A IMG tag.
Step 11 -- Fill in the text for the final paragraph in Article 1. Note: If there were going to be more articles in the Main Column, you might want to consider creating an extra "spacer" table, which just had one row of spacer GIFs, creating the right amount of space between articles (this table could also possibly contain some sort of divider graphic). Then you could copy the code from Article 1, and recycle that to create the second article.
Step 12 -- Now, put the IMG tag for the "Quote for the Week" graphic into the Right Column area; don't forget the ALT attribute. Believe it or not, you're going to have to place the graphic in its own one cell table; otherwise, the second table won't lay flat against it regardless of what you do.
Step 13 -- Lay in the nested table for the Quote into the Right Column; just do the first row of spacer GIFs and make sure that that's working. Again, don't forget to make sure that the widths of the three spacer GIFs together adds up EXACTLY to the width of the column.
Step 14 -- Now, lay in the second row of the nested table in the Right Column. Use just spacer GIFs and filler content for now. Again, don't forget the VALIGN attribute set to "top" in the central area of the nested table.
Step 15 -- Add the final H3, P, and CITE tagged items to the nested table in the Right Column.
Step 16 -- Add an extra spacer GIF row to the bottom of the nested table in the Right Column, so that the quote doesn't bump against the bottom of the colored cell, but instead has a little space.

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.

Step 17 -- (Extra Credit) I have added finishing touches of JavaScript to this design, so that it works appropriately (although the links still do not go anywhere). This code still has to be correctly adapted for the four sections: Home, Programming, Training, and Creative.
Step 18 -- (Extra Credit) Now I've added a little embedded Style Sheet to make the page have a consistent appearance from browser to browser and platform to platform.

Main Menu