CS 100 - Lab 11

CS 100 - Computer Literacy, Fall 2004

Lab 11

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

HTML Tables

The Table tags allow information to be displayed in cells in a grid of rows and columns. Tables are one of the main ways to layout data in a format you choose. A good web page showing various tables can be found at http://wp.netscape.com/assist/net_sites/table_sample.html.

<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 11

Due: Monday 4/11/2004 by 12:00 noon

For this lab assignment, complete the following:

Create a web page to display the following information:
- A title of CS 100 Lab 11
- A heading of CS 100 Lab 11
- An unordered list containing your name, Net-ID, Time of Lab
- A table showing the winners of the 6 relay swimming events from the 2004 Olympics in Athens. These events are the women's 4x100 Freestyle Relay, the women's 4x200 Freestyle Relay, the women's 4X100 Medley Relay, the men's 4x100 Freestyle Relay, the men's 4x200 Freestyle Relay, and the men's 4X100 Medley Relay. 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.
  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.
- A link to the web page with the 2004 Olympic Swimming medalists (which IS listed above and can be accessed using "view source").
This web page must be placed in your web space (in your public_html directory) on your Icarus account.
You are also required to put a link on your Icarus Home Page to the page you created for this lab.
Verify that your link and the file are viewable via a web browser from the URL of:
```
     http://icarus.uic.edu/~NETID

where NETID is your own Net-ID
```
You can check this out via the link to your home page on the CS 100 Student List page. Once you are at your home page, follow the link you added to your home page for this lab assignment.
You are also to submit this web page electronically by either emailling the page to the CS 100 instructor account at i100@cs.uic.eduo or using the UNIX turnin command.
To use the UNIX turnin command to electronically hand-in your html file using the project name of lab11. To submit the file in <filename> for lab11, the turnin command is entered as:
```
     turnin -c troy -p lab11 <filename>
```
Thus if your file has the name of lab11.html, the command would be:
```
     turnin -c troy -p lab11 lab11.html
```