CS 100 - Computer Literacy, Fall 2004

Lab 7

This lab assignment will have you create an HTML page that will contain a table.

HTML Tables

• <table> </table> - The table tag

  This is the tag that surrounds all of the information for the table.

  Atrributes:

  • border - allow you to specify the thickness of the border surrounding the table cells. To remove a border set the value to zero.
  • cellspacing - allows you to specify the amount of space between neighboring cells.
  • cellpadding - allows you to specify the amount of space between the edge of a cell and the text in the cell.

• <tr> </tr> - The table row tag

  This tag is used to specify each row of the table.

• <td> </td> - The table detail tag

  This tag is used to specify cells in a row of the table.

  Attributes:

  • rowspan - allows you to specify that a cell will span multiple rows. The cell will span into the row(s) below the row which specifies the rowspanned cell. These rows will have one less cell specifed.
  • colspan - allows you to specify that a cell will span multiple columns. The cell will span into the column(s) to the right of spanned cell. This row will have less cells since the column spanned cell takes up multiple cell positions.

• <th> </th> - The table heading tag

  This tag is used to specify cells in a row of the table. The text in this cell is automatically be bolded and centered.

  Attributes:

  • rowspan - allows you to specify that a cell will span multiple rows. The cell will span into the row(s) below the row which specifies the rowspanned cell. These rows will have one less cell specifed.
  • colspan - allows you to specify that a cell will span multiple columns. The cell will span into the column(s) to the right of spanned cell. This row will have less cells since the column spanned cell takes up multiple cell positions.

• <caption> </caption> - The table caption tag

  This tag is used to place a caption above or below the table. This tag has an attribute of align that takes values of either top or bottom to specify the location of the caption.

Lab Assignment 7

Create a web page to display the following information:

1. A title of CS 100 Lab 7
2. A heading of CS 100 Lab 7
3. An unordered list containing your name, Net-ID, Time of Lab
4. A table showing the winners of the 6 relay swimming events from the 2004 Olympics in Athens. This information is given toward the middle and at the bottom of the page at

   http://www.athens2004.com/en/OlympicMedals/medals?lang=en&channel=OlympicMedals&discipline_code=SW

   Your table is to show the names of the winning country for the Gold, Silver and Bronze medals for each event. Your table must also have a caption describing the table.

   The events are the 4x100 Freestyle Relay, the 4x200 Freestyle Relay, and the 4X100 Medley Relay. These events occur for both the mens and womens swim teams. Your table should appear as shown below (with a caption and the team information correctly filled in!). Note the table uses table headings, row spans and column spans. Also note, the table shown below is actually an image so you can't just "view source" to see how the table was created.

   

5. A link to the web page with the 2004 Olympic Swimming medalists (which is listed above).

Use the UNIX turnin command to electronically hand-in your html file using the project name of lab7. To submit the file in <filename> for lab7, the turnin command is entered as:

     turnin -c troy -p lab7 <filename>