Chapter
9: Working with Tables
A. Download the
compressed zip folder AssignmentFilesChap9.zip
to your desktop.".
B. Create a Chapter9 folder on your deskop. Copy and place the 3 files from the zip folder into your
Chapter 9 folder.
C. Copy and paste
the the following table style rules in your external cascading style
sheet- mystyle.css
See the
attached sample of the CSS file
/* style rules for table */
.tableformat{background-color: white; width: 550px}
.tablealign{vertical-align: top}
TH{font-size: 14pt; font-weight: bold; margin: 0px; padding: 5px}
TD{font-size: 12pt; margin: 0px; padding: 5px}
CAPTION{font-size: 14pt; font-weight: bold}
D. Open the HTML
document in Wordpad. Verify the HTML
document is linked to the cascading style sheet. The following
style sheet link tag should be in between the <HEAD> and
</HEAD> tags.
<LINK REL="stylesheet" TYPE="text/css"
HREF="mystyle.css">
E. Create the
tables and apply the table formatting CSS rules illustrated in this chapter
to your HTML document. Follow the step-by-step demo
instructions for this chapter exercise (see chapter 9 lecture presentation
under Course Documents). See the attached sample of the
completed HTML document with the table tags.
F. Save your HTML
document. View and verify your web page displays properly in your
browser. See the attached sample of
the web page output.
G. Verify if the HTML document- chapter6.html
passes the W3C Markup Validation Service. You will need to upload your HTML
document to the site- http://validator.w3.org/.
H. Verify if the CSS document – mystyle.css passes the W3C CSS Validation Service. You will need to upload your CSS document to the site- http://jigsaw.w3.org/css-validator/
I. Submit your work:
a. All the following files are required: 1) HTML document - Chapter9.html and 2) cascading style sheet- mystyle.css and 3). image file - HTML.jpg. All 3 files are required.
b. Zip up you folder and upload your Chapter9 compressed folder to the Canvas Chapter 9 Assignment dropbox.
Chapter Topics |
Points |
1 Add
a Table |
4
|
2
Assign a Table Border |
2
|
3. Apply the CSS rules to the table |
4
|
5. Create
Newspaper-Style Columns Table
|
4
|
6. Add a
Table Header |
2 |
7. Add a
Table Caption |
2 |
8. Span
Cells Across Columns and Rows
|
2 |
9. HTML document passes W3C Markup Validation Service
|
10
|
Total |
30 |