Printed from TeacherJohn.com • http://www.teacherjohn.com/cabrillo/dm60a/exercises/ex09.php

Exercise 9
Tables and Pixel Shims

Resources for this exercise:

In this exercise you will create an invisible table to be used for page layout. This table must be constructed with a top row of pixel shims, using the technique outlined in the tutorial How to Build a Bulletproof* Table Using Transparent Pixel Shims. Note that this tutorial uses a very simple three-column table for demonstration purposes, but your table will have more columns.

Step 1 - Create your exercise 9 page

1.1) Read the tutorial listed above. You may wish to print it out.

1.2) Using a basic text editor create an HTML document. This page will become your exercise 9 page.

1.3) This page must display your name and "Exercise 9".

1.4) This page's <title> must indicate that this is your exercise 9, so it should say something like "John Sky's DM60A Exercise 9".

1.5) This page must contain the DocType that will enable you to use an HTML validator (as explained in How to Use the W3C HTML and CSS Validators).

Remember that now we are using the XHTML 1.0 Strict DocType, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.6) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. Make sure you use the code for XHTML 1.0 Strict, not HTML 4.01 Transitional, as you are using an XHTML, not an HTML, DocType. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

1.7) This page must contain a link with a relative path to your home ("index.html") page (this path will not start with "http://", as it must be a relative path, not a URL).

1.8) On this page, create an invisible table (using CSS, set the table's border to zero) to be used for layout purposes. See How to Build a Bulletproof* Table Using Transparent Pixel Shims for a tutorial on the technique to be used in this exercise.

1.9) This table must be a fixed width (for example, set the table's width attribute to something like 800 or 1000 pixels). An 800-pixel wide table will fit on most monitors.

1.10) The top row must contain your pixel shims (and only the pixel shims).

1.11) This table must contain at least five columns. Note that with five columns, you can basically have three main columns, and two thin "spacer" (or gutter) columns that are used to control the space betwen the three main columns.

1.12) This table must contain at least four rows (including the top pixel shim row).

1.13) This table must demonstrate the correct use of either a colspan or rowspan attribute. Remember that the cells of the top row, containing the pixels shims, must not use any colspan or rowspan attributes.

1.14) This table must contain some images, and some text. This table itself must be completely invisible, with no borders showing. The width of the table data cells is set by using the width attribute of the invisible pixel <img> tags, not by setting the width of the <td> tags. The cellspacing, and cellpadding attributes of the <table> must be set to zero, and the width attribute must be set to some fixed number, such as 800 or 1000. Using CSS, make the table invisible by setting the border to zero.

1.15) Do not leave any cells empty. If you have cells that are without content, you must put an invisible space character "&nbsp;" in them:

For example, instead of:
<td></td>

use this code instead:
<td>&nbsp;</td>

1.16) As always, when building tables, I strongly recommend that you first build the structure of the table, then make sure it validates, and then, only after you know its structure is error-free, put contents into the cells. Many, if not most, validation errors on Web pages that contain complex tables are caused by improperly built tables. If you wait to validate until the end, you may — indeed you probably will — wind up with a page that is very difficult to troubleshoot! (I told you so...)

When building invisible tables, I recommend setting the table's border width to 1 pixel while working on the table so you can see it (even though this may cause things to not line up exactly, at least you can see what's going on). Then, to make sure it works the way you want, set the border to "0". Sometimes while working on complex invisible tables it is helpful to go back and forth, between it being visible and invisible.

1.17) Don't forget to always use the alt attribute of the <img> tag (the validator will remind you to do this, if you forget). Also note that for invisible pixels used as spacers or shims, use the empty alt value (nothing between the quotes), as in:
<img alt="" src="cleardot.gif" />

1.18) Save this file as "exercise9.html".

1.19) Upload this Web page into your public_html folder on the server. Upload your images into your images folder that is within your public_html folder.

1.20) View your page (the page on the server, not the page on your disk) in a Web browser. For example, if you called it exercise9.html:

Go to:
http://www.webhawks.org/~yourusername/exercise9.html
to view your exercise 9 page.

1.21) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DTD) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

1.22) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

1.23) If there are any errors, fix them, re-upload the page, and validate it again.

Step 2 - Modify your home page

Note that, unlike your exercises that now must validate to XHTML 1.0 Strict, your home page may validate to either HTML 4.01 Transitional or XHTML 1.0 Strict. Whichever standard you use, make sure your validtor buttons or links match the DocType. (In other words, if you are using an HTML DocType, don't use a validator button that syas "XHTML"; if you are using an XHTML DocType, don't use a validator button that syas "HTML".)

2.1) Modify your home page to include a link that goes to your exercise 9 page. Make sure your home page has a working link to each of your completed exercises

2.2) As always, your home page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

2.3) View your home page (the page on the server, not the page on your local disk) in a Web browser to make sure your links work.

2.4) Make sure your home page validates, with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can now easily do this by clicking on your validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

2.5) If you have used any CSS on your home page, make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

2.6) If there are any errors, fix them, re-upload the page, and validate it again.

Step 3 - Submit the feedback form

3.1) Submit the feedback form. To receive credit for this exercise you must submit thi feedback form before it expires. This exercise is due on 7/15/08. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 07/17/08.