Lesson Practice 5-3:
Styling with Tables & Backgrounds

Styling Tables

Task 1 - Using Color in a Table

1. Open your template file in Notepad++.  Immediately save in your CSS folder as table1.htm.
   
   
2. In the title element, add the title: Using Color in a Table
   
   
3. Add an h2 header to the top of the page with the same text as in the title element.
   
   
4. Add the style element in the header to create an internal style sheet.
   
   
5. Create class rules:
   1. Create and apply a style to center the h2 heading element.
      
      
   2. Declare a class rule named .odd with the background color with value powderblue.
      
      
   3. Declare a class style named .even with the background color with value lightgrey.
      
      
   4. Declare a style for the table element with the border property and value of solid black 2px.
      
      
   5. Declare a style for the td element with the padding property and value of 4px 6px, as well as a border of solid darkgray 1px.
      
      
6. Create and style a table:
   1. In the body of the document, create a table of seven rows and three columns.
      
      
   2. In each cell place text to indicate that cell's row and column location.
      
      
   3. Apply the odd style to the opening tag of each odd numbered row, and the even style to each opening tag of the even numbered rows.
      
      
7. Save the file again and preview in the browser. Be sure all of the styles you created are working correctly.

Task 2 - Using Alignment in a Table

1. Open a table1.htm in Notepad++.  Immediately save in your CSS folder as table2.htm.
   
   
2. Change the title and h2 text to: Using Alignment in a Table
   
   
3. Add a row containing three cells to the top of the table. Add the text Col 1 to the first cell, Col2 to the second cell, Col3 to the third cell.
   
   
4. Create and apply styles:
   1. Create a tag style for the table element that sets the width to 90%
      
      
   2. Add a style named .center which will align text to the center
      
      
   3. Add a style named .right which will align text to the right.
      
      
   4. Apply the center class to the center cell of each row.
      
      
   5. Apply the right class to the cells in the third column of each row.
      
      
   6. Add the center class to the top row (not the cells).
      
      
5. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.
   
   
6. Save the file again.
   
   

Using Background Properties

Task 3 - Using a Tiled Background Image

1. Open a nocss.htm in Notepad++.  Immediately save the file in your CSS folder as bg1.htm.
   
   
2. In the title element, add the title: Using a Tiled Background Image
   
   
3. Add an h2 header to the top of the page with the same text as in the title element.
   
   
4. Add the style element in the header, to create an internal style sheet.
   
   
5. Create and apply a style to center the h2 heading element.
   
   
6. Right click on the image at the right, click Save image as, and place the image in your Lesson site images folder, using the existing filename.
   
   
7. To the internal style sheet, add a rule for the body with the background-color property of white, background-image property with the path to your weavetile.gif file.
   
   
8. This property defaults to repeating the image both horizontally and vertically (tiling).
   
   
9. Preview the file and see how this works.
   
   
10. Add another property to the body rule:  background-repeat with the value repeat-y.
    
    
11. Preview to see the difference. Save the file again.

Task 4 - Using a Fixed Background Image

1. Open a nocss.htm in Notepad++.  Immediately save the file in your CSS folder as bg2.htm
   
   
2. In the title element, add the title: Using a Fixed Background Image
   
   
3. Add an h2 header to the top of the page with the same text as in the title element.
   
   
4. Add the style element in the header, to create an internal style sheet.
   
   
5. Create and apply a style to center the h2 heading element.
   
   
6. Right click on the image at the right, click Save image as, and place the image in your Lesson site images folder, using the existing filename.
   
   
7. To the embedded style sheet, add a rule for the body with the background-color property of white, background-image property with the path to your confetti.gif file.
   
   
8. Add the background-repeat property to the body rule, with the value no-repeat.
   
   
9. Thid proprty defaults to scrolling the image.
   
   
10. Preview the file and see how this works.
    
    
11. Add two more properies to the body rule: background-attachment with fixed value, and background-position with the value right top.
    
    
12. Preview to see the difference. Save the file again.

Task 5 - Add Table and Background Links to Index Page, and add Background Images to Links

1. Right-click the image at the right and save it in your Lesson site images folder.
   
   
2. Open your mystyles.css file.
   
   
3. Create a new dt rule with declarations to add a background image, using the image you just saved, and background repeat with value no-repeat.
   
   
4. Open your index.htm file.
   
   
5. Add CSS Tables and CSS Backgrounds as new terms on the CSS side of the links table.
   
   
6. Add the two table files and and the two bg files as definitions in their appropriate locations.
   
   
7. Link the titles to their files.
   
   
8. Preview and test your links.
   
   
9. Examine the background images - each dt element should have a button-look under it. Decide if any of the term text instances seem too wide for the image.
   If so, return to the style sheet and add a width property to widen the image as needed. Experiment to find the dimensions that work for you.
   
   
10. When you are satisfied with your results, save. Publish your new files, the new image files, and the edited index file and style sheet.