Overview

This module gives you a series of exercises, each of which will let you try your hand at creating various kinds of simple (X)HTML tables.

Save your XHTML template file as w24h.htm, and title the page, "Sarah Strong W24h" (changing Sarah Strong to your own name). Make sure your name is listed as author.

In the body section of your w24h.htm file, create a table with five rows and four columns.

Here's a good technique for coding tables:

1. Put in the beginning and ending table tags, each on a line of its own:
   <table>
   </table>
2. Put in the opening and closing tags for the first row, also on their own lines, indented 3-4 spaces:
   <table>
       <tr>
       </tr>
   </table>
3. Create a cell with a place-holder, indented but on one row:
   <table>
       <tr>
           <td>~</td>
       </tr>
   </table>
4. Copy the cell and paste it to create as many cells as there are columns:
   <table>
       <tr>
           <td>~</td>
           <td>~</td>
           <td>~</td>
           <td>~</td>
       </tr>
   </table>
5. Copy the row with its cells and paste it to create as many rows as needed
   (You get the picture!)

Add this text to each cell:

Subject Number Class                     Credits
INP     150    Web Coding I                 3
CIS     120    Intro to Computer Science    2
ENG     208    Technical Communication II   3
PLS     112    American Government          3

Save your file and validate it.

1. Create a second table, this one with 3 rows and 3 columns.
2. Number the cells from 1 to 9:

     1  2  3
     4  5  6
     7  8  9

3. Set the table width to 300 pixels
4. Use copy-and-paste to make 3 copies of this table. Modify each of these tables like this:
   1. First table:
      1. Border 1
      2. Cell spacing 0
      3. Cell padding 10
      4. Table color: green
   2. Second table:
      1. Border 0
      2. Cell spacing 10
      3. Cell padding 0
      4. First row: red
      5. Second row: yellow
      6. Third row: tan
   3. Third table:
      1. Border 10
      2. Cell spacing 5
      3. Cell padding 5
      4. Each cell a different color, using these colors:
         #ff0000    #ff9999    #ffcccc
         #00ff00    #99ff99    #ccffcc
         #0000ff    #9999ff    #ccccff
   4. Copy the third table and paste in another copy below it. Change the fourth table to have:
      1. Border 0
      2. Cell spacing 10
      3. Cell padding 0
   5. Copy the fourth table and paste in another copy. Change the fifth table to have:
      1. Cell spacing 0
      2. Cell padding 10

Save the file and validate it again.

When you're done, double-check that the assignment meets the specifications above. There should be five (5) tables.

This is an in-class exercise: Show your instructor your work before leaving class.