Nesting Tables

You will now take the table from the previous exercise and "nest it" into one cell of a table in another file. This other table has one cell in it that will contain the entire table you just worked on.

Nesting is used for a variety of reasons, but mainly to add additional complexity to the parent table. With CSS Positioning, it is not uncommon to nest a table inside of a <div> tag (these tags are used almost exclusively for CSS Positioning).

Shims

When you go to the next page, you'll be assembling the final table. Take note of the three small narrow light blue strips at the top of the first cell in the second row (the cell that contains the links to search engines - together the three images look like an inverted "U"). These are called shims.

Similar to the shims used to level a piece of furniture, these image files are used to help control page composition. In this case, they are used to keep the links away from the walls of the cell. Cellpadding could have been used, but cellpadding affects all cells in a table equally. You cannot apply cellpadding to individual cells (td tags). Applying cellpadding to the parent table would result in the images at the top to being moved away from one another due to the padding needed for the cell that currently has the shims in it. Therefore, shims are used in this example.

Note that CSS has better tools for doing this sort of thing, but similar tricks continue to be used in tables at times, primarily for controlling the size of table rows and columns.

The shims are all made from one tiny 5 x 5 pixel light blue GIF image file. A shim is usually a GIF file that's either transparent or the same color as the background; that way their appearance won't matter when you modify their shape.

Their shape is customized to whatever size is needed to properly position the page elements. The shims' dimensions are specified using their IMG tags' WIDTH and HEIGHT attributes. In this case, the image can be stretched to any size because it is a uniform color. The distortion that would normally accompany a manipulation of a bitmap photographic image is not a problem.

Margins

Also make note of 4 new BODY margin attributes that I've added. These are placed to control the distance between the edges of the browser window and its contents. By default there is usually a gap. We don't want a gap because it would place a white border around our newsletter. We covered margins in an earlier lesson, but not in the context of preventing margins. Both are needed to support all browsers.

Assignment:

  1. Open the file G09_nesting.html in your browser. Position it so that you can read these instructions while you work on it. We will be inserting the table that we've been working on into the bottom right cell of this table.
  2. Take a moment to note the shims used on the left side for positioning the links' text. You will be adding a bgcolor to that cell that matches the shim color so that they blend in.
  3. Now, save the file as G09_yourlastname.html
  4. If you have not done so already, download the image files that you will need for this and other exercises in this series following the instructions in A04_saveFiles1.html in the section named "To get the image files that you need for your exercises".
  5. View the source code in Notepad.
  6. Look for the HTML comment in the code near the bottom. It says: PUT NESTED TABLE CODE BENEATH THIS LINE
  7. Open the file you completed in the last exercise: G07_yourlastname.html
  8. Copy all of the code used for the table - that means the opening TABLE tag, the closing TABLE tag and everything between them. Then you can close that file.
  9. Go back to the Notepad file of: G09_yourlastname.html.
  10. Paste the code you just copied between the comment tags (you can't miss them!).
  11. Save the file. Check it in your browser.
  12. Now, put the BGCOLOR="#FFFFCC" attribute and value in the BODY tag. This should make the background of the page the same color as the background of the top images: a pale yellow.
  13. Next, put the BGCOLOR="#CCFFFF" attribute and value in the TD tag for the first cell, second row (the cell with the shims and links in it). This will make the background color of that cell match the color of the shims, making the shims effectively invisible. This type of thing, matching a background color to the color of an image, is used often in html and css.
  14. Take a look at your file again in the browser.
  15. Next, change all 4 margin settings in the BODY tag to "0" (zero, not the letter o)
  16. Save the file and open it in your browser.
  17. Online students: send me the html file by email.

 

© 2011 Dan Vaughan and its licensors. All rights reserved.