Designing Web Pages 2
Otherwise known as CS 50.11B
Tim Fleming. Instructor
Assignment 5
This week we learn about tables. Ever since CSS hit the big time, the table has become less common. Semantic markup and CSS have replaced tables as the primary layout tools. Tables have reverted to their original role: displaying data in records (rows) and fields (columns).
Tip:
Here are a couple of examples of CSS styled tables for your reference. These will open in a new window, so you can view the source code. Make sure you view the css code, too!
PS -- please study the HTML and CSS code used to create these tables but ignore the content. The content is fictional :)
Preparation:
Text: Chapter 13 - Getting Tabular: tables and lists
CD:: View lesson 5 (optional)
For Credit:
Develop an HTML page named a5.html and use a "link" element to link it to an external stylesheet named a5.css. Meet the following requirements (30 points total):
(10 pts) Include a table of at least four columns and four rows, using the table, tr, th, td, and caption elements. Also include a summary attribute.
(5 pts) Use box properties, background-color, color, and caption-side properties to style your table. Use any other properties that appeal to you.
(5 pts) Use the colspan and rowspan attributes at least once each within your table code.
(5 pts) Use a nested table with at least 2 rows and 2 columns in your table.
(5 pts) Include an image or a background image in your table.
Each of your webpages must include a W3C validation icon for XHTML 1.0 Strict at the bottom. You should use the W3C validator to check your XHTML code and your CSS code.Links to these validators are on the Links page. Note that points will be deducted from your score for each error in your XHTML or CSS code.
Upload your webpage and css file to the server. Upload them directly into your public_html folder, not into a subfolder.
- Participate in the lesson 5 discussion - 5 pts.
Post a message on the "Lesson 5 discussion" topic of our message board. Make sure you find the topic with this title that was authored by me. This could involve asking a question, answering another student's question, giving an example of something that you struggled with and then overcame (or didn't!), giving an example of something you found particularly cool, or any other constructive way you can think of to participate. In the "Name" field the first word MUST be your student server username; after that you can type your real name to make it more personal. Contributions of just a few words will not receive credit.
Do not post any new topics on the message board. New topics that are created by students will be deleted.
Your Website Project:
Continue work on your website project. You may want to refer to the good web design and further website project requirements page.