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

Exercise 8: Tables

Resources for this exercise:

In this exercise you will create four different tables: a simple visible table, a simple invisible table, and one table nested within another table. I strongly recommend that you validate in stages, as many validation errors have to do with table structure. In other words, for each table: create the table with simple contents in its cells (say, a word or letter in each cell), upload the page, validate its structure, fix errors, then add the real contents. In the case of the nested table, create the two tables separately, validate them, and then you can simply paste one table into a cell of the other.

Step 1 - Create your exercise 8 page

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

1.2) This page must display your name and "Exercise 8".

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

1.4) 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.5) This page must contain the character encoding meta tag (as explained in Character Encoding for Web Pages). Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the <head> section. So right after the <head> tag, place this line of code:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

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) This page must contain a visible table with at least 3 rows and 3 columns (to make the table structure visible, set the value of the CSS border property applied to <table> to something other than zero). Place some text in every cell.

1.9) This page must contain a another, different table with at least 3 rows and 3 columns, but this table must be invisible (to do this, set the value of the CSS border property applied to <table> to zero). Do not use any background colors in this table (it's supposed to be an invisible table, OK?). Place text in every cell.

1.10) This page must contain a table nested within another table. Both of these tables must have at least 2 rows and 2 columns, and both must be visible. Place text in every cell. These tables must be separate from, and different from, the other two tables.

Hint: remember that a nested table is a complete table inserted into a table cell of another table (just as a nested list is a complete list inserted into a list item of another list). The best way to proceed is to create these two tables separately, and then simply cut and paste one table into a cell (in other words, between a <td> and </td>) of the other table.

1.11) This page must demonstrate the use of the <caption> element.

1.12) Demonstrate the use of all the elements and attributes listed below in these tables. (Each table does not have to use all of these elements and attributes, but all of these tags and attributes must be demonstrated somewhere on the page.)

1.13) In summary, this page must correctly use the following HTML elements and attributes:

Description Element Attribute
table <table> width
table row <tr>  
table header <th>  
table data cell <td>  
table caption <caption>  

Note that, for the next two steps, you may use either external, internal, or local styling. If you use an external style sheet, of course, you will need to create and save the style sheet and upload it to your css folder on the server.

1.14) Using CSS, make a color appear as the background of at least two table cells (use the background-color property). Use a different color for each table cell.

1.15) Using CSS, make the contents of a <td> (not a <th>) align centered horizontally.

1.16) Save this file as "exercise8.html".

1.17) Upload this page to your "public_html" folder on the webhawks.org server.

1.18) View your page (the page on the server, not the page on your disk) in a Web browser:

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

1.19) 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.20) 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.21) If there are any errors, fix them, re-upload the page, and validate it again.

Step 2 - Modify your home page

2.1) Modify your home page to include a link that goes to your exercise 8 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 the HTML on your home 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.

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 fll credit for this exercise you must submit this feedback form before it expires. This exercise is due on 10/31/11. 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 11/02/11.

Optional Fun

Note that, in this exercise, I do not require you to demonstrate the use of the rowspan or colspan attributes of <td>. After you have a good understanding of basic table structure, you may wish to try modifying the structure of a table with rowspan or colspan. This would be a good thing to try, but only if you are comfortable building a basic table with no validation errors. If you wish to try this, I ask that you leave the rest of your exercise page the way it is, and add another table to play with these attributes. And if you can't get it to validate, you should remove it (so you don't lose credit for validation errors) and place it on a different page for troubleshooting.