Creating Simple Tables with Advanced Attributes

The first step involves creating a file with basic tables that you can use for the rest of the exercise by making copies of the file, and thus not having to "re-invent the table".

1. Start with an XHTML template file such as the one described in exercise X10h.
2. Create a tables subdirectory in your class Web folder - there will be multiple files in this exercise. Save the file as basic.htm.
3. Title the page "Simple Tables with Advanced Attributes", and make that the heading as well (using <h3>). Put your name under the heading (as <h2>), and in the third heading line put "Basic Tables" (using <h1>).
4. Create a simple table - remember to follow XHTML standards and good coding practice for easy debugging. The table should have:
• 4 rows
• 4 columns
• the first row composed of table headers with <th> tags
• the other three rows should be the normal table data cells with <td> tags.
• Set the border to 1, so you can see them more clearly.
• In each cell, put text giving the row and column location of the cell. For example, Row 1 Column 1 and Row 4 column 3.
• Do not color the table, rows, or cells - we'll be doing that as part of some of the exercises, and coloring the basic table will make it difficult or impossible to see some of the effects.
5. Check the appearance of your table against the example image.
6. Once you're satisfied with the first table, copy it and paste in 4 more copies for a total of 5 tables.
7. Put a heading (with <h3>) above each table, giving its number (e.g. "Table 1").
8. Create a summary attribute for each table tag. The "summary" should simply label each table as "Table 1" up through "Table 5". For example, <table summary="Table 1">
9. Save this file and validate it using the W3C validator service.

In this part of the exercise, we'll be changing the cell padding and spacing of the five basic tables. To help remember which is which, think of each cell as one of several shipping cartons in a warehouse:

Spacing is the distance between the outside edges of the cartons; cellspacing is the distance between the outside edges of the cells in a table.

Padding is the styrofoam or bubble-pack inside each carton to protect the contents; cellpadding is the space between the inner edges of the cells and the text or image inside them.

Here are the instructions:

1. Save basic.htm as space.htm. Change the third heading line to "Cell Spacing and Padding".
2. Leave Table 1 as-is (border 1).
3. In Table 2, set the cellpadding to 10 and the cellspacing to 0.
4. In Table 3, set the cellpadding to 0 and the cellspacing to 10.
5. In Table 4, set the border to 0, bgcolor to red, cellpadding to 0 and the cellspacing to 0.
6. In Table 5, set the border to 0, bgcolor to aqua, cellpadding to 10 and the cellspacing to 10.
7. Validate your table.
8. Compare your tables in each of the three browsers.
9. Think about it...
   1. What uses can you think of for spacing like Table 2 (lots of padding, no spacing) and Table 3 (lots of spacing, no padding)?
   2. What are tables with no border, no spacing, and no padding used for?
   3. Can you see differences between Netscape's rendering of Table 5 (no border, lots of padding and spacing) and IE or Opera's? If so, what limits does that put on your use of that combination of features?

Designers can include information about desired height and width of tables and their elements. The actual rendering of height and width by browsers is the result of a complex series of caluculations, with the desired height and width only a small part of the formula. (For further discussion, see module W24c.)

1. Save basic.htm as size.htm. Change the third heading line to "Cell Sizes".


Note: in the following instructions, always set the column width in cells of the first row. Cells in lower rows need not have width specifications.


2. Set size.htm Table 1's sizes as follows:
   1. Table width: unspecified
   2. Column 1 width: 100 pixels
   3. Column 2 width: 200 pixels
   4. Column 3 width: 5 pixels
   5. Column 4 width: unspecified
      Observe in three browsers: is Column 3 actually 5 pixels? What differences, if any, do you see in the different browsers?
3. Set size.htm Table 2's sizes as follows:
   1. Table width: 100 pixels
   2. Column 1 width: 50%
   3. Column 2 width: 25%
   4. Column 3 width: 20%
   5. Column 4 width: 5%
      Observe in three browsers: Are column widths actually any different? What is determining their width?
4. Set size.htm Table 3's sizes as follows:
   1. Table width: 600 pixels
   2. Column 1 width: 50%
   3. Column 2 width: 25%
   4. Column 3 width: 20%
   5. Column 4 width: 5%
      Observe: is Column 4 actually 5% of the total width?
5. Set size.htm Table 4's sizes as follows:
   1. Table width: 600 pixels
   2. Column 1 width: 100 pixels
   3. Column 2 width: 100 pixels
   4. Column 3 width: 100 pixels
   5. Column 4 width: 100 pixels
      Observe in three browsers: is the overall table width the same as that of Table 3 (600 pixels)? If so, is each of the four columns actually 100 pixels wide? What can you deduce from this about the relative importance of requested table width and requested column width?
6. Set size.htm Table 5's sizes as follows:
   1. Table width: unspecified
   2. Remove all column width specifications
      Note: to set rows height in a valid XHTML file, put the height attribute in the first cell of the row.
   3. Row 2 height: 30 pixels
   4. Row 3 height: 60 pixels
   5. Row 4 height: 90 pixels
      Observe in three browsers: from the relative heights of the rows, does it appear that the browsers have all implemented the indicated heights?

Column and row grouping is a non-standard feature added by Microsoft for Internet Explorer. Though it's not smart to use it, it's a fun feature. Try it by doing this:

1. Save basic.htm as groups.htm. Change the third heading line to "Groups".
2. In groups.htm Table 1
   1. Add to the summary in the table tag: Rules for Columns
   2. Remove the attribute border="1" from the table tag.
   3. Add to the table tag the attribute: rules="cols"
      When you display the table in IE, you should see a border around the table and between each of the columns. Does this work in any of the other browsers?
3. In groups.htm Table 2
   1. Add to the summary in the table tag: Head, foot, and body colored
   2. Remove the attribute border="1" from the table tag.
   3. Before the first row, insert the line:
      <thead bgcolor="seagreen">
      "Table Head" is the first line of the table, intended to repeat at the top of each printed page if the table is long.
   4. Before the second row, insert the line:
      <tbody bgcolor="khaki">
      "Table Body" is the main part of the table.
   5. Before the last row, insert the line:
      <tfoot bgcolor="lightseagreen">
      "Table foot" is the last line of a table, intended to repeat at the bottom of each printed page if the table is long.
4. In groups.htm Table 3
   1. Add to the summary in the table tag: Column group using spans
      Column groups allow you to define formatting for one or more columns. Column groups can be defined either by giving the span (as we will do here) or defining each column (as we will in Table 4).
   2. Remove the attribute border="1" from the table tag.
   3. Add these attributes to the table tag:
      rules="groups" width="550"
      We'll distinguish the effects of the column groups by making the table a bit more spread-out, and aligning the column groups differently.
   4. Before the first row, insert these two lines:
      <colgroup span="1" align="center">
      <colgroup span="3" align="right">
5. In groups.htm Table 4
   1. Add to the summary in the table tag: Column group using col tags
      This time, we use the col tag to define each column.
   2. Before the first row, insert these eight lines:
      <colgroup bgcolor="lightblue">
          <col>
          <col>
      </colgroup>
      <colgroup>
          <col bgcolor="skyblue">
          <col bgcolor="slateblue">
      </colgroup>
      We're distinguishing the columns by background color. In the first group, we've made the entire group light blue; in the second group, we've given each column a different shade of blue. This flexibility is what may make listing the individual columns worthwhile.
6. In groups.htm Table 5
   1. Add to the summary in the table tag: Column group using col tags
      This time, we use the col tag to define each column.
   2. Make sure this border attribute is in the table tag:
      border="1"
   3. Before the first row, insert these nine lines:
      <colgroup width="30%">
          <col bgcolor="tomato">
      </colgroup>
      <colgroup>
          <col bgcolor="moccasin">
          <col bgcolor="orchid">
          <col bgcolor="mistyrose">
      </colgroup>
      

   When you're done, be sure to look at your groups file in Netscape and Opera versions as well as IE. What do you observe? What do you conclude from what you observe?

   Because these tables use non-standard tags, your code won't validate as XHTML 1.0. You should still run it through the validator to check for other possible errors.

Most browsers display requested table border sizes, but the way they implement them and the ability to set the colors of borders, and of elements of the borders, are not implemented the same way. Background images for tables and cells are also implemented differently in the browsers, so try these variations and see how they work...

1. Save basic.htm as borders.htm. Change the third heading line to "Borders and Backgrounds".
2. In borders.htm Table 1 - background image combinations
1. Add to the summary in the table tag: Background image combinations 1
2. Add to the table tag the attribute: background="rain_lin.gif"
   Copy rain_lin.gif from this Web page and save it on your workspace. When you upload your XHTML pages, be sure to upload the image files as well.
   
3. Add background images to rows 2 and 4 (leaving 1 and 3 without background image specifications).
   1. Row 2: use purp_nb2.gif
      Copy, save, and upload the image from here:
      
   2. Row 4: use pnkbkg.gif
      Copy, save, and upload the image from here:
      

Observe the difference between Explorer and Netscape. Which is dominant in each browser: the table background or the row background? Looking at the rainbow pattern, what is the difference between the way the background image is placed in individual cells?

3. In borders.htm Table 2 - more background image combinations
1. Add to the summary in the table tag: Background image combinations 2
2. Add to the row tags for rows 1 and 2 the attribute: background="rain_lin.gif"
3. Add background images to the 2nd, 3rd, and 4th table data tags for rows 2 and 3:
   1. Rows 2 and 3 Column 2: smile1.gif
   2. Rows 2 and 3 Column 3: smile2.gif
   3. Rows 2 and 3 Column 4: smile3.gif
      Copy, save, and upload the three smile images from here:
      

Observe again the differences in the way the browsers handle background images in tables.

• How do Explorer (and Opera) handle row background images as opposed to Netscape?
• Does it confirm your earlier ideas about the dominance of the table and row backgrounds? If not, how would you modify your conclusion?
• The three smile images are animated gifs. How does each browser handle animation in background images? What is your recommendation about the use of animated background images in general?
4. In borders.htm Table 3 - Border Colors 1
1. Add to the summary in the table tag: Border Colors 1
2. Add to the table tag the attribute: bordercolor="green"
3. Widen the table border to 8 pixels
4. Row 1: Add the border color attribute "aquamarine"
5. Row 2: Add a border color to each of the cell data tags:
   1. Row 2 Column 1: "salmon"
   2. Row 2 Column 2: "maroon"
   3. Row 2 Column 3: "royalblue"
   4. Row 2 Column 4: "lime"
6. Row 3: Add the border color attribute "goldenrod"
7. Row 3 again: Add a border color to the first three cell data tags:
   1. Row 3 Column 1: "slateblue"
   2. Row 3 Column 2: "orangered"
   3. Row 3 Column 3: "violet"
   4. Row 3 Column 4: (no border color)
8. Row 4: Leave it as-is.

Observe:

• Which browser(s) display borders of different colors?
• Do some browsers display certain borders in color and not others?
  • Which?
  • What shade(s) are used for the non-colored borders?
• In the browser(s) that display colored borders:
  • What does the border color in the table tag do?
  • In the row and cell border colors?
  • Which is dominant?
  • What color are the cell borders when there is no border color indicated for a row or cell?
• In the browsers that don't display colored borders, what shades are used instead?
5. In borders.htm Table 4 - Border Colors 2
1. Add to the summary in the table tag: Dark and Light Border Colors
2. Add these attributes to the table tag:
   1. bordercolorlight="sandybrown"
   2. bordercolordark="chocolate"
   3. bordercolor="cyan"
3. Widen the table border to 8 pixels
4. Row 1: Add the border color attribute "aqua"
5. Row 2: Add light border color "lime" and dark border color "seagreen"
6. Row 3: Add light border color "slateblue" and dark border color "royalblue"
7. Row 4: Leave it as-is.

Observe: In each browser, at least one attribute is ignored: which browser ignores which attribute(s)? In the browser(s) that display all colored borders, what is the position of the "light" border color as compared to the "dark"? Is it the same for the table border and the cell borders?

6. In borders.htm Table 5 - Double Table Simulating Borders
   1. Add to the summary in the table tag: Double Table Simulated Border
   2. Add attributes to the table tag removing its border, giving it cell spacing of 6 and "royalblue" as its background color.
   3. Before the first row, create an empy row and table data cell, with a new table tag in it like this:
      <table border="0" cellspacing="6" bgcolor="royalblue" summary="Table 5 - Double Table Simulating Borders>
        <tr>
          <td>
            <table summary="Inner Table" border="2" bgcolor="white">
   4. Skip down to the end of Table 5. Just after its closing tag, add closing tags for the outer table's cell and row, and the table itself. (The closing table tag for the inner table becomes the closing of the outer table.)
            </table>
    </td>
  </tr>
</table>

   You have just created a nested table. The outer table, with no border, background color, and cell spacing of 6 - together with the 8-pixel border of the inner table - fakes a colored border of 8 pixels.

   Observe: How similar is the simulated border in each browser? How does it compare with the borders created by "real" border attributes?

   Border coloring and background images are not standard XHTML, so this page will not validate. It's still helpful to check the validation page to see whether there are other errors, such as missing end tags.

When you're done, double-check that the assignment meets the specifications above.

These are the files that should validate:

• basic.htm
• size.htm
• space.htm

Upload to your work to your WCC student Website, and send email to the instructor with the URIs of all five files:

1. basic.htm
2. size.htm
3. space.htm
4. groups.htm
5. borders.htm

Be sure your email meets the formal requirements: name, class, section and exercise (W24m), and that it follows standard business-email practice.

Audience