Ross Sheppard High School
Computer Programming 10
Student Learning Guide
Using Tables

	When you have finished this project, you will be able to:
	create a Web page that uses a table
	describe the circumstances under which a table would be used
	demonstrate understanding of how HTML tags are used within a table
	describe the following terms: table row column data

1. A feature of most web browsers is the ability to display tables. Tables are columns and rows of information that make it easy for the viewer to read the information. The top portion of this page that lists the objectives of this project is an example of a table.
   
   
2. Create a new folder in INF2200 called Tables. Save everything to do with this project in that folder.
   
   
3. Start Notepad and create a new file for this assignment. Save the file as Tables.html
   
   
4. Add the beginning tags and meta tags for this assignment, then create a heading. Your text file should be similar to the one shown below:
   
   
   
   
5. Begin a table by using the <TABLE> Tag.
   
   
6. Start a new row with the <TR> (table row) Tag.
   
   
7. Start a new cell with the <TD> (table data) Tag.
   
   
8. Type the information required for that cell, then type the end table data tag: </TD>.
   
   
9. Add a second cell to the first row, with the corresponding data.
   
   
10. End the first row by using the end table row tag: </TR> Tag.
    
    
11. Your table should be similar to the one shown below:
    
    
    
    
12. Create a second row containing two cells of data.
    
    
13. End the tables using the end table tag: </TABLE> Tag.
    
    
14. Your table should be similar to the one shown below:
    
    
    
    
15. View your tables file in Windows Internet Explorer.
    
    
    
    
16. The table, in this simple state, is not very appealing, nor is it very easy to read. From a user's point of view, this table is unacceptable.
    
    
17. Most tables use lines between the rows and columns to separate the data and make it easier to read.
    
    
18. Change the start table tag to read <TABLE BORDER=3>.
    
    
19. Save and view the file in Explorer.
    
    
    
    
20. Within a table, most HTML tags can be used. For example, the FONT, CENTER, and A HREF tags can all be placed in individual cells within the table.
    
    
21. If you want to increase the space around the text in a table, change the start table tag to read <TABLE BORDER=3 CELLPADDING=10>
    
    
22. Try using different values for the BORDER and CELLPADDING tags. What happens?
    
    
23. Based on what you know about HTML tags, make your table look like the one in the illustration below:
    
    
    
    
24. Ask your teacher to look at your tables page.
    
    
25. If you wish to merge, or combine, cells, you can add theCOLSPAN or ROWSPAN identifiers to the TH and TD tags. In order to use these commands they must be placed inside a Table Header tag or within a Table Data tag
    
    Example: Within a Header Tag - <TH ROWSPAN=3>
    or
    Within a Table Data tag - <TD ROWSPAN=2 COLSPAN=2>
    
    If you wish to do this, be sure to specify the number of cells that should be spanned. For example, to merge Two cells across 2 rows, you would use ROWSPAN=2.
    
    
26. Create a new web page that demonstrates your understanding of tables. It must contain the following features:
    
    
    • at least 2 columns
    • at least 3 rows
    • at least 5 different cell colors
    • at least 2 font styles (NOT FONT FACES)
    • at least 2 font sizes
    • 2 cells must have multiple rows of text
    • 2 cells must contain URLs
    • at least 2 different alignments (left and center)
    • 2 cells must contain a graphic or icon
    • demonstrate row span and column span
    • demonstrate Cell Padding
    • demonstrate good page design and layout
      
      
27. Click here to see the marking guide for this project.
    
    
28. Save the project folder in your "Hand In" folder on your personal disk space so that this project can be graded..