Griffin | Web Design
 
Resume Table of Contents  

spacey

Web Design
HTML

Chapter 4
Creating Tables in a Web Site Using an External Style Sheet

 
State Standards
 
  • WD 2.5 Content Standard:
    Students create and format a table in a HTML/XHTML
    document. (A1.9.1)(A1.9.6)
  • WD 2.5.1 Diagram and construct a table
  • WD 2.5.2 Write the code to insert a table in a document using <table>
  • WD 2.5.3 Construct a table using the <tr> and <td> tags to create table rows and columns in a document
  • WD 2.5.4 Utilize the ROWSPAN and COLSPAN attribute on a document
  • WD 2.5.5 Apply BORDER= attributes to a table (BORDERCOLOR=, BORDERSIZE=)
  • WD 2.5.6 Control the dimensions of a table by utilizing attributes (CELLPADDING=, CELLSPACING=, WIDTH=)
  • WD 2.5.7 Align text in a table utilizing the ALIGN= attribute
Chapter Objectives
 


Students will:

  • Create and format a table in a HTML/XHTML document.
  • Define table elements
  • Describe the steps used to plan, design, and code a table
  • Create a borderless table to organize images
  • Create a vertical menu bar with text links
  • Create a borderless table to organize text
  • Create a horizontal menu bar with text links
  • Create a table with borders
  • Change the horizontal alignment of text
  • Add background color to rows and cells
  • Alter the spacing between and within cells using the cellspacing and cellpadding attributes
  • Insert a caption below a table
  • Use the rowspan and colspan attributes
Why learn tables?
 
  • "Tables allow you to organize information on a Web page using HTML tags." (P161)
1. HTML Assignment
Duration: 1 Period
 

Read/Skim Chapter 4/CH4 PowerPoint

Print, staple, and complete the Chapter 4 Questions.

Grading:
1. Questions

 ___ 15 points

Total  
 ___ 15 points

p. 132 - 143
2.

Lecture CH4

  • Creating Web Pages with Tables (134)
  • Table Elements (136)
  • Borders, Headers, Captions, and Rules (137)
  • Planning a Table (139)
  • Coding a Table (141)

  • Using Tables for Layout
    • USA Today
    • Banana Republic
    • Mint

USA banana bbc

rail net mint

Practice Table 1 - Basic Table
Practice Table 2 - Spanned col
Practice Table 3 - 2 x 2 with background colors
Practice Table 4 - This is the one I'm grading!

3.

HTML Project 4 Assignment - sabatinas
Duration: 1 Period

Begin the web page starting on page 171. Save as sabatinas.html in the HTML folder. (Note: There are no spaces in the file name.)

  • Insert and center an Image (173)
  • Horizontal Menu Bar (174)

Note: Page 173 has a typo. The 1st time is shows the image height is 190. It should be 195. All other times it correctly lists it as 195.

Make sure to type your name, Period, date, and class at the end of sabatinas.html.

p. 171 - 183
4.

HTML Assignment - styles1.css
Duration: 1 Period

Begin the web page starting on page 178. Save as styles1.css in the HTML folder. (There are no spaces in the file name.)

  • linking to an external style sheet (186)

Note: Change the anchor tags as follows:

a {text-decoration: none;}
a:hover {text-decoration: underline}

p. 178 - 189
5. HTML Assignment -
Duration: 1 Period
p. 189 - 206
 

Begin the style sheet new web page starting on page 189. Save as appetizers.html in the HTML folder. (There are no spaces in the file name.)

Add

  • Table w/ Borders (193)
  • Cell Spacing, Cellpadding, and a Caption (197)
  • Spanning Rows and Columns (200)
  • adding a caption (203)

Note: Change the cell spacing and cell padding in appetizers to be the same as pizza and salads.

Match my sample. (It is different from the book). Make sure to type your name, Period, date, and class at the end of the home page.

Grading:
sabatinas.html
1. 50 pt margin  
2. email link  
3. menu bar  
4. company logo  
5. name, period, date, class  
style1.css
6. applied to all pages  
appetizer.html
7. link in bold & italicizers  
8. link back home  
9. table border / color background  
10. table w/ background color  
salads.html
11. cell spacing  
pizza.html
12. rowspan  
13. table caption  
Total  
 ___ 10 points

Note 1: Change the image height in sabatinas to 195.

Note 2: Check P159 to see what it should look like. salads and pizza are included in the student data files but don't forget update them according to the book.

Note 3: I have changed the styles1.css. Change the anchor tags noted above.

Note 4: I have changed the cell spacing and cell padding in appetizer. Match pizza and salads.

sabatinas.html Sample (Follow the book but use my notes and example. Do not use any code from this example. I can tell if you do and it is considered cheating. )

 
6.

HTML Apply Your Knowledge Assignment
Duration: 1/2 Period

p. 186
 

1. Editing the Apply Your Knowledge Web Page

Open apply4-1.htm. Complete the Web page outlined on page 208. Save as apply4-1solution.htm. Match my sample. (It is different from the book).

Note 1: Make sure to type your name, Period, date, and class at the end of the Web page.

Note 2: Add an embedded style sheet (like getting greener) to include:

  • a font family Arial, Verdana, Garamond
  • font size of 11pt

4-1 small

Grading:
1. html title  
2. rows/cols spanned  
3. background colors  
4. cell borders  
5. name, period, date, class  
Total  
 ___ 10 points
7. HTML Extend Your Knowledge
Duration: 1 Period
p. 210
 

Open the file named extend4-1.html and save as Extend4-1Solution.html. Complete the Web page outlined on page 210 - 211. Match my sample. (It is different from the book).

Notes:

  • Add these items to the external style sheet:
    • a font family Arial, Verdana, Garamond
    • font size of 11pt
  • May need to add a th {text-align: center} to your style sheet
  • Rules attribute is on noted on page 166 and APP9.

extend4-1 small

Grading:
1. rules attributes  
2. fonts corrected  
3. th centered  
4. border = 12  
5. cell padding = 15  
6. background color  
7. html titles  
8. name, period, date, class  
Total  
 ___ 10 points
8. HTML In the Lab Assignment - Beautiful Backyards
Duration: 2 Periods
p. 213
 

Start a new HTML file with the title, lab4-1solution.html. Complete the Web page outlined on page 213. Match my sample. (It is different from the book).

Notes:

  • Add these items to the embedded style sheet:
    • a font family Arial, Verdana, Garamond
    • font size of 11pt
  • Do not text align: center (look at my example)
Grading:
1. H1 Color  
2. 1st P large  
3. 2 col / 2 row table  
4. 2 images  
5. images centered  
6. cellpadding = 15  
7. html titles  
8. name, period, date, class  
Total  
 ___ 10 points
 
9. HTML In the Lab Assignment - Creating Schedules - 5 PTS EXTRA CREDIT
Duration: 2 Periods
p. 216
 

Start a new HTML file with the title, lab4-3solution.html. Complete the Web page outlined on page 216 - 217. Match my sample. (It is different from the book).

Help Note:

  • <table style="width: 90%" rules="rows">
  • <tr>
        <th rowspan="5" style="width: 25%"><img src="piano.jpg"/></th>
        <th class="subtitle">Day of Week</th>
        <th class="subtitle">Time</th>
    </tr>
4-3 small
Grading:
1. Rules attribute applied  
2. each image spans 5 rows  
3. external style applied  
4. each title spans 3 columns  
5. html titles  
6. name, period, date, class  
Total  
 ___ 10 points
 
10. HTML Cases and Places - Color Table
Duration: 2 Periods
 
 

Start a new HTML file with the title, case4-xsolution.html.

Create a color table listing and showing 16 colors. Sketch out the color table BEFORE you create it.

Grading:
1. sketch of table  
2. at least 10 predefined colors from page 68 or APP 11 - 12.  
3. 1st row is spanned with heading  
4. at least 4 additional hex colors BLUE
5. text describing color  
6. background color matches text  
7. readable text (white text with a dark blue background)  
8. cell padding = 10  
9. html titles  
10. name, period, date, class  
Total  
 ___ 15 points
 
11. Optional – Complete the Online Practice Test
Optional – Complete the Practice Table
 
12.

CH4 Quiz - Part 1(MC)
CH4 Quiz - Part 2 (Production)

Grading:
1.

bordered table
   • (3 rows/2 cols)
   • cell padding
   • spanning

 
2. 3 working links  
3. donut text  
4. text formatting
   • bold
   • italics
   • arial font
 
5. 3rd row  
6. Why tables  
7. html titles  
8.

HTML Formatting
   • indented tags
   • </body>
   • </html>

 
9. name, period, date, class  
Total  
 ___ 20 points

 

 

Additional Resources

A.

Online Textbook Resource
http://oc.course.com/sc/html6e/index.cfm?action=learn


top